jQuery EasyUI數據表格之一

時間 2021-01-12

標籤 javascript css html java jquery web json 瀏覽器 app jsp 欄目 JQuery 简体版

原文原文鏈接

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><base href="<%=basePath%>"><title>My JSP '002.jsp' starting page</title>	<meta http-equiv="pragma" content="no-cache">	<meta http-equiv="cache-control" content="no-cache">	<meta http-equiv="expires" content="0">    	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">	<meta http-equiv="description" content="This is my page">	<script type="text/javascript" src="js/jquery.min.js"></script>	<link type="text/css" rel="stylesheet" href="js/themes/default/easyui.css"/>	<link type="text/css" rel="stylesheet" href="js/themes/icon.css"/> 	<link type="text/css" rel="stylesheet" href="js/demo/demo.css"/>	<script src="js/jquery.easyui.min.js"></script></head><body><h2>基本數據表格</h2><p>這個基本的數據表格</p><div style=="margin:20px 0"></div><table class="easyui-datagrid" title="基本數據表格" style="width:700px; height:250px;" data-options="singleSelect:true,collapsible:true,url:'datagrid_data1.json',method:'get'">    	<thead>    		<tr>    			<th data-options="field:'itemid',width:80">編號</th>    			<th data-options="field:'product',width:100">產品</th>    			<th data-options="field:'listprice',width:100">標價</th>    			<th data-options="field:'unitprice',width:100">成本</th>    			<th data-options="field:'attribute',width:100">屬性</th>    			<th　data-options="field:'status',width:100">狀態</th>    		</tr>    	</thead></table></body></html>

效果以下：javascript

這個圖片怎麼回事呢？css

通過分析，第一次是沒有數據源的問題，在目錄下缺乏data_grid1.json文件html

通過加上文件後尚未出來效果，發現是MyEclipse web Browser裏面沒有出來效果，換成Firefox瀏覽器，OK。java

2.繼續研究官方的文檔，發現有關於單元格變色的東東哦。jquery

<table class="easyui-datagrid" title="數據表格樣式案例" style="width:700px;height:250px"   		data-options="singleSelect:true,   					  iconCls:'icon_save',   					  url:'datagrid_data1.json',   					  method:'get'"   	>   	<thead>   	<tr>   		<th data-options="field:'itemid',width:100">項目編碼</th>   		<th data-options="field:'productid',width:80">產品編號</th>   		<th data-options="field:'listprice',width:100,align:'center',styler:cellStyler">列表價格</th>   		<th data-options="field:'unitcost',width:100">成本價格</th>   		<th data-options="field:'attr1',width:100">屬性</th>   		<th data-options="field:'status',width:100,align:'center'">狀態</th>   	</tr>   	</thead></table><script type="text/javascript">   		function cellStyler(value,row,index){   			if(value<30)   				return 'background:#f00;color:yellow';   		}</script>

主要用到了技術知識點是，styler,指向了cellStyler函數。web

單元格styler(樣式)函數，返回如'background:red'這樣的自定義單元格樣式字符串。該函數帶3個參數：
value：字段值。
row：行記錄數據。
index: 行索引。json

代碼示例：瀏覽器

$('#dg').datagrid({
	columns:[[
		{field:'listprice',title:'List Price', width:80, align:'right',
			styler: function(value,row,index){
				if (value < 20){
					return 'background-color:#ffee00;color:red;';
				}
			}
		}
	]]
});

視頻課：https://edu.csdn.net/course/play/7621 app