easyui控件的使用之dataGrid

本文转载自查看原文 2018-10-12 23:55 1115 easyui/ datagrid/ datagrid-filter.js

最近在做一个项目，主要考虑到表单功能和界面简洁等因素，选择了easyui作为开发框架。easyui有丰富且功能强大的插件库，其中dataGrid的功能尤为重要，下面我就介绍下如何用dataGrid实现下面图示的功能。

我的这个页面中，主要包含了dataGrid的以下几个功能：

一异步从数据库获取数据，并绑定dataGrid的功能。

二实现dataGrid的sql语句或者存储过程分页的功能，实现每次查询只读取当前页的数据(这里本人使用的是Oracle11g数据库)。

三使用过滤（filter）功能，这里datagrid-filter.js插件，在表头增加了过滤行，而且给审核时间列做了可以根据条件（等于、小于、大于）进行过滤的功能。如下图。

四还有表单的编辑（在编辑完成后，列表会自动刷新）、导出等功能。编辑效果如下图。

五异步动态加载的二级联动combobox。实现市和区县的联动功能。

下面我来具体介绍下，这四部分是如何实现的。

首先，需要引入需要的js及css文件。其中icon.css是图标样式，datagrid-filter.js是过滤行所需的插件，easyui-lang-zh_CN.js则是语言配置文件(如果不引入，页码等信息会显示英文，日期格式也会有问题)

1 <link href="../Js_Lib/jqEasyUI1.3.5/themes/default/easyui.css" rel="stylesheet" />
2 <link href="../Js_Lib/jqEasyUI1.3.5/themes/icon.css" rel="stylesheet" />
3 <script src="../Js_Lib/jquery-1.7.1.min.js"></script>
4 <script src="../Js_Lib/jqEasyUI1.3.5/jquery.easyui.min.js"></script>
5 <script src="../Js_Lib/jqEasyUI1.3.5/datagrid/datagrid-filter.js"></script>
6 <script src="../Js_Lib/jqEasyUI1.3.5/datagrid/easyui-lang-zh_CN.js"></script>

View Code

下面是body的全部代码

  1 <body>
  2 
  3 <table id="dg" title="工程列表" style="width:100%;height:800px">
  4 <thead>
  5 <tr>
  6 <th field="ck" checkbox="true"></th>
  7 <th data-options="field:'PROJECT_ID',width:50,sortable:true,align:'center',hidden: true" >序号</th>
  8 <th data-options="field:'PROJECT_KEYCODE',width:180,sortable:true,align:'center'">项目编号</th>
  9 <th data-options="field:'PROJECT_AREA',width:100,align:'center'">项目所在地市</th>
 10 <th data-options="field:'PROJECT_AREA_DISTRICT',width:100,align:'center'">所在地区县</th>
 11 <th data-options="field:'PROJECT_NAME',width:300,align:'center'">项目名称</th>
 12 <th data-options="field:'PROJECT_USE',width:150,align:'center'">项目类别</th>
 13 <th data-options="field:'PROJECT_TYPE',width:200,align:'center'">使用性质</th>
 14 <th data-options="field:'CHECKTIME',width:200,sortable:true,align:'center',formatter:formatDate">审核时间</th>
 15 <th data-options="field:'DES_DEPT',width:200,align:'center'">设计单位</th>
 16 <th data-options="field:'SURVEY_DEPT',width:200,align:'center'">勘察单位</th>
 17 </tr>
 18 </thead>
 19 </table>
 20 
 21 <div id="dlg" class="easyui-dialog" closed="true"></div>
 22 <script type="text/javascript">
 23 $(function () {
 24 {
 25 var toolbar = [
 26 {
 27 text: '基本信息编辑',
 28 iconCls: 'icon-edit',
 29 handler: function () {
 30 var row = $('#dg').datagrid('getSelected');
 31 
 32 $('#dlg').dialog({
 33 title: '基本信息编辑',
 34 width: 650,
 35 height: 450,
 36 top: 20,
 37 closed: false,
 38 cache: false,
 39 href: 'arc_project_info.aspx?mode=upd&pk=' + row.PROJECT_ID 
 40 });
 41 $('#dlg').window('center');
 42 }
 43 }
 44 , '-', {
 45 text: '基本信息查询',
 46 iconCls: 'icon-search',
 47 handler: function () {
 48 var row = $('#dg').datagrid('getSelected');
 49 var detailLog = $("<div/>").dialog(
 50 {
 51 title: '工程基本信息',
 52 width: '800px',
 53 height: '550px',
 54 top: 20,
 55 modal: false,
 56 closable: true,
 57 href: "detail.aspx?id=" + row.PROJECT_ID + "&temp=" + Math.random()
 58 });
 59 }
 60 }, '-', {
 61 text: '材料信息查询',
 62 iconCls: 'icon-search',
 63 handler: function () {
 64 var row = $('#dg').datagrid('getSelected');
 65 window.location = 'clxx.aspx?project_id=' + row.PROJECT_ID;
 66 }
 67 }, '-', {
 68 text: '导出EXCEL',
 69 iconCls: 'icon-save',
 70 handler: function () {
 71 
 72 var rules = $.data($('#dg')[0], "datagrid").options.filterRules;
 73 rule = $.data($('#dg')[0], "datagrid").options.filterStringify(rules);
 74 var sort = $.data($('#dg')[0], "datagrid").options.sort;
 75 var order = $.data($('#dg')[0], "datagrid").options.sortOrder;
 76 var url = "handler.ashx?type=export&filterrules=" + rule + "&sort=" + sort + "&order=" + order;
 77 window.location.href = url;
 78 }
 79 }, '-', {
 80 text: '添加备注',
 81 iconCls: 'icon-add',
 82 handler: function () { alert('功能开发中！') }
 83 }, '-', {
 84 text: '备注查询',
 85 iconCls: 'icon-search',
 86 handler: function () { alert('功能开发中！') }
 87 }];
 88 }
 89 var dg = $('#dg').datagrid({
 90 fit: true,
 91 url: 'handler.ashx?type=project',
 92 pagination: true,
 93 clientPaging: false,
 94 remoteFilter: true,
 95 rownumbers: true,
 96 singleSelect:true,
 97 filterDelay: 1000,
 98 nowrap: false,
 99 pageSize: 10,
100 sort:'project_id',
101 toolbar: toolbar
102 });
103 dg.datagrid('enableFilter', [
104 {
105 field: 'PROJECT_ID',
106 type: 'numberbox',
107 sortable:true,
108 options: { precision:1 },
109 op: ['equal', 'less', 'greater']
110 },
111 {
112 field: 'CHECKTIME',
113 type: "text",
114 sortable: true,
115 options: { precision: 1 },
116 op: ['equal', 'less', 'greater']//, 'notequal'
117 }
118 ,
119 {
120 
121 field: 'PROJECT_PROGRESS',
122 type: "combobox",
123 height:"35px",
124 options: {
125 panelHeight: '500',
126 editable: false,
127 data: [{ value: '', text: '全部' }, { value: '1', text: '合同备案' }, { value: '2', text: '施工许可' }, { value: '3', text: '竣工验收' }],
128 onChange: function (value) {
129 if (value == '') {
130 dg.datagrid('removeFilterRule', 'PROJECT_PROGRESS');
131 } else {
132 dg.datagrid('addFilterRule', {
133 field: 'PROJECT_PROGRESS',
134 op: 'equal',
135 value: value
136 });
137 }
138 dg.datagrid('doFilter');
139 }
140 }
141 },
142 {
143 
144 field: 'PROJECT_USE',
145 type: "combobox",
146 height: "35px",
147 options: {
148 panelHeight: '500',
149 editable: false,
150 data: [{ value: '', text: '全部' }, { value: '市政工程', text: '市政工程' }, { value: '房屋建筑工程', text: '房屋建筑工程' }],
151 onChange: function (value) {
152 if (value == '') {
153 dg.datagrid('removeFilterRule', 'PROJECT_USE');
154 } else {
155 dg.datagrid('addFilterRule', {
156 field: 'PROJECT_USE',
157 op: 'equal',
158 value: value
159 });
160 }
161 dg.datagrid('doFilter');
162 }
163 }
164 //op: ['equal', 'less', 'greater']//, 'notequal'
165 },
166 {
167 
168 field: 'PROJECT_TYPE',
169 type: "combobox",
170 height: "35px",
171 options: {
172 panelHeight: '500',
173 editable: false,
174 url: 'arc_base_handler.ashx?all=1&key=03',
175 method: 'get',
176 valueField: 'base_name',//base_code
177 textField: 'base_name',
178 onChange: function (value) {
179 if (value == '') {
180 dg.datagrid('removeFilterRule', 'PROJECT_TYPE');
181 } else {
182 dg.datagrid('addFilterRule', {
183 field: 'PROJECT_TYPE',
184 op: 'equal',
185 value: value
186 });
187 }
188 dg.datagrid('doFilter');
189 }
190 }
191 },
192 {
193 
194 field: 'PROJECT_AREA_DISTRICT',
195 type: "combobox",
196 height: "35px",
197 options: {
198 panelHeight: '500',
199 editable: false,
200 url: 'arc_base_handler.ashx?all=1&key=' + $("#_easyui_textbox_input2").val(),
201 method: 'get',
202 valueField: 'base_name',//base_code
203 textField: 'base_name',
204 onChange: function (value) {
205 if (value == '') {
206 dg.datagrid('removeFilterRule', 'PROJECT_AREA_DISTRICT');
207 } else {
208 dg.datagrid('addFilterRule', {
209 field: 'PROJECT_AREA_DISTRICT',
210 op: 'equal',
211 value: value
212 });
213 }
214 dg.datagrid('doFilter');
215 }
216 }
217 },
218 {
219 
220 field: 'PROJECT_AREA',
221 type: "combobox",
222 
223 options: {
224 multiple: false,
225 url: 'arc_base_handler.ashx?all=1&key=04&mode=qry',
226 method: 'get',
227 editable: false,
228 valueField: 'base_code',//base_code
229 textField: 'base_name',
230 onChange: function (value) {
231 
232 if (value == '') {
233 dg.datagrid('removeFilterRule', 'PROJECT_AREA');
234 } else {
235 
236 synchDISTRICT(value);
237 dg.datagrid('addFilterRule', {
238 field: 'PROJECT_AREA',
239 op: 'equal',
240 value: $(this).combobox('getText')
241 });
242 }
243 dg.datagrid('doFilter');
244 }
245 },
246 
247 }
248 ]);
249 function synchDISTRICT(key)
250 {
251 var url = 'arc_base_handler.ashx?all=1&key=' + key + '&mode=qry';// + 
252 $("input[name='PROJECT_AREA_DISTRICT']").combobox({
253 url: url,
254 valueField: 'base_name',
255 textField: 'base_name'
256 });
257 }
258 $("input[name='CHECKTIME']").attr("readOnly", "readOnly");
259 $("input[name='CHECKTIME']").focus(function () {
260 WdatePicker({ isShowClear: false, errDealMode: 1, maxDate: '%y-%M-{%d}', dateFmt: 'yyyy-MM-dd' });
261 });
262 
263 });
264 $('#dlg').dialog({
265 onClose: function () {
266 $('#dg').datagrid('reload'); //重新加载载数据
267 }
268 });
269 </script>
270 </body>

View Code

后台数据查询的主要代码：

 1 string ls_key = context.Request.Params["key"];
 2 string ls_page = context.Request.Params["page"];
 3 string ls_sort = context.Request.Params["sort"];
 4 string ls_order = context.Request.Params["order"];
 5 string ls_rows = context.Request.Params["rows"];
 6 string ls_filter = context.Request.Params["filterrules"];
 7 
 8 if (!string.IsNullOrEmpty(ls_filter))//这里将获取到的过滤条件组合成一个类，再传递给数据库操作层。
 9 {
10 JArray ja = (JArray)JsonConvert.DeserializeObject(ls_filter);
11 
12 foreach (JObject o in ja)
13 {
14 FILTER lm_filter = new FILTER();
15 lm_filter.filed = o["field"].ToString();
16 lm_filter.op = o["op"].ToString();
17 lm_filter.val = o["value"].ToString();
18 lm_fils.Add(lm_filter);
19 
20 }
21 }
22 
23 private string ls_getJson(string as_page, string as_rows, IList<FILTER> ls_fil, string ls_sort, string ls_order,string ls_add)
24 {
25 
26 int li_count = 0;
27 
28 li_count = lb_pro.GetCount(ls_fil);//返回记录总数
29 string ls_rtn = "";
30 string ls_con = "";
31 
32 {
33 if(string.IsNullOrEmpty(ls_sort))
34 {
35 ls_sort = "project_id";
36 }
37 DataTable dt = lb_pro.GetListByPage(ls_fil, ls_sort+" "+ ls_order, (int.Parse(as_page) - 1) * int.Parse(as_rows) + 1, int.Parse(as_page) * int.Parse(as_rows),ls_add);
38 
39 foreach (DataRow dr in dt.Rows)
40 {
41 ls_con += "{";
42 for (int s=0;s< dt.Columns.Count; s++)
43 {
44 string colname = dt.Columns[s].ColumnName;
45 ls_con += "\"" + colname + "\":\"" + dr[colname].ToString().Trim() + "\",";
46 }
47 
48 ls_con = ls_con.Substring(0, ls_con.Length - 1);
49 ls_con += "},";
50 
51 }
52 
53 }
54 if (ls_con == "")
55 return "{\"total\":\"" + li_count + "\",\"rows\":[]}";
56 return ls_rtn = "{\"total\":\"" + li_count + "\",\"rows\":" + "["+ ls_con.Substring(0, ls_con.Length - 1)+"]}";//project_id,project_name,project_type,project_use,project_area,project_btime,project_acreage,project_price
57 
58 
59 }

View Code

数据库操作层代码如下：

 1 public DataTable GetListByPage(IList<FILTER> am_con, string orderby, int startIndex, int endIndex,string ls_add)
 2 {
 3 StringBuilder strSql = new StringBuilder();
 4 string as_con = " 1=1 ";
 5 foreach (FILTER fi in am_con)
 6 {
 7 if (fi.op != "contains")
 8 {
 9 if (fi.filed.ToLower().IndexOf("time") > 0 || fi.filed.ToLower().IndexOf("date") > 0)
10 {
11 CDatabase.Parameters.Add(":filed", OracleDbType.Date).Value = Convert.ToDateTime(fi.val);
12 }
13 else
14 {
15 CDatabase.Parameters.Add(":filed", OracleDbType.Varchar2).Value = fi.val;
16 }
17 }
18 switch (fi.op)
19 {
20 case "less":
21 as_con += " and " + fi.filed + " < :filed ";
22 break;
23 case "greater":
24 as_con += " and " + fi.filed + " > :filed ";
25 break;
26 case "equal":
27 as_con += " and " + fi.filed + " = :filed ";
28 break;
29 case "contains":
30 
31 if (fi.filed.ToUpper() == "PROJECT_AREA")
32 {
33 as_con += " and (PROJECT_AREA_DISTRICT like :PROJECT_AREA_DISTRICT or " + fi.filed + " like: filed )";
34 CDatabase.Parameters.Add(":PROJECT_AREA_DISTRICT", OracleDbType.Varchar2).Value = "%" + fi.val + "%";
35 CDatabase.Parameters.Add(":filed", OracleDbType.Varchar2).Value = "%" + fi.val + "%";
36 }
37 else
38 {
39 as_con += " and " + fi.filed + " like :filed ";
40 CDatabase.Parameters.Add(":filed", OracleDbType.Varchar2).Value = "%" + fi.val + "%";
41 }
42 break;
43 
44 default:
45 break;
46 }
47 
48 }
49 if(ls_add!="")
50 {
51 as_con += ls_add;
52 }
53 if (startIndex==0&&endIndex==0)
54 strSql.AppendFormat("select * from （ select t.*,rownum rn from( select * from arc_project {0} {1}) t ) ", "where " + as_con, "order by " + orderby);
55 else
56 strSql.AppendFormat("select * from （ select t.*,rownum rn from( select * from arc_project {2} {3}) t ) where rn >= {0} and rn <= {1}", startIndex, endIndex, "where " + as_con, "order by " + orderby);
57 
58 DataTable dt = CDatabase.SetDataTable(Convert.ToString(strSql));
59 return dt;
60 
61 }

View Code

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 EasyUI应用之 datagrid与menubutton结合 Jquery EasyUI Datagrid的使用 easyui的datagrid和treegrid的使用 easyui datagrid使用参考 easyui datagrid使用参考 easyui datagrid使用按钮 easyui之datagrid的使用 easyUI Datagrid 控件 param参数的用途探索 EasyUI 之datagrid 使用【DataGrid属性解释】使用easyUI 为datagrid冻结列