easyUI datagrid简单使用：着重两点1、editor对象的click事件；2、将dialog窗体内的值填写到当前正编辑的单元格内
1 <!DOCTYPE html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title></title>
6 <link href="css/easyui.css" rel="stylesheet" />
7 <link href="css/icon.css" rel="stylesheet" />
8 <link href="css/demo.css" rel="stylesheet" />
9 <script src="js/jquery.min.js"></script>
10 <script src="js/jquery.easyui.min.js"></script>
11 </head>
12 <body>
13 <!--datagrid-->
14 <table id="dg"></table>
15 <!--dialog-->
16 <div id="dd">
17 <input type="text" id="txt" />
18 </div>
19 <script type="text/javascript">
20 var columns = [[
21 { field: ‘A‘, title: ‘A‘, width: 100, rowspan: 2 },
22 { title: ‘B‘, colspan: 3 },
23 { title: ‘C‘, colspan: 3 }
24 ], [
25 {
26 field: ‘a‘, title: ‘a‘, width: 100, editor: {
27 type: ‘textbox‘,
28 options: {
29 required: true,
30 missingMessage: ‘*必填*‘
31 }
32 }
33 },
34 {
35 field: ‘b‘, title: ‘b‘, width: 100, editor: {
36 type: ‘datebox‘
37 }
38 },
39 {
40 field: ‘c‘, title: ‘c‘, width: 100, editor: {
41 type: ‘combobox‘,
42 options: {
43 data: [{ value: ‘cc‘, text: ‘cc‘ }, { value: ‘ccc‘, text: ‘ccc‘ }],
44 panelHeight: ‘auto‘
45 }
46 }
47 },
48 {
49 field: ‘d‘, title: ‘d‘, width: 100, editor: {
50 type: ‘numberbox‘,
51 options: { precision: 1 }
52 }
53 },
54 { field: ‘e‘, title: ‘e‘, width: 100, editor: { type: ‘checkbox‘, options: { on: ‘1‘, off: ‘0‘ } } },
55 {
56 field: ‘f‘, title: ‘f‘, width: 100, editor: {
57 type: ‘dialog‘,
58 options: {
59 dlgId: ‘dd‘,
60 textId: ‘txt‘,
61 currField: ‘f‘
62 }
63 }
64 }
65 ]];
66 var data = [{ A: ‘A‘, a: ‘a‘, b: ‘b‘, c: ‘c‘, d: ‘d‘, e: ‘e‘, f: ‘f‘ }];
67 $(function () {
68 //初始化弹窗
69 $(‘#dd‘).dialog({
70 title: ‘弹窗‘,
71 width: 400,
72 height: ‘auto‘,
73 closed: true,
74 cache: false,
75 modal: true,
76 buttons: [{
77 text: ‘保存‘,
78 handler: function () {
79 var index = editIndex;
80 var cellEditor = $(‘#dg‘).datagrid(‘getEditor‘, { index: index, field: editField });
81 cellEditor.actions.setValue(cellEditor.target, $(‘#txt‘).val());
82 $(‘#dd‘).dialog(‘close‘);
83 }
84 }, {
85 text: ‘取消‘,
86 handler: function () {
87 $(‘#dd‘).dialog(‘close‘);
88 }
89 }]
90 });
91 //初始化表格
92 $(‘#dg‘).datagrid({
93 data: data,
94 title: ‘对账报告- PA02‘,
95 iconCls: ‘icon-title‘,
96 width: 650,
97 height: ‘auto‘,
98 singleSelect: true,
99 fitColumns: false,
100 columns: columns,
101 rownumbers: true,
102 showFooter: true,
103 pagination: true,//分页控件
104 fit: true,//自动大小
105 border: true,
106 onLoadSuccess: onLoadSuccess,
107 toolbar: [{
108 text: ‘添加‘,
109 iconCls: ‘icon-add‘,
110 handler: function () {
111 editCell = false;
112 if ($(‘#dg‘).datagrid(‘validateRow‘, editIndex)) {
113 $(‘#dg‘).datagrid(‘endEdit‘, editIndex);
114 $(‘#dg‘).datagrid(‘appendRow‘, {});
115 $(‘#dg‘).datagrid(‘selectRow‘, editIndex + 1).datagrid(‘beginEdit‘, editIndex + 1);
116 editIndex = editIndex + 1;
117 }
118 }
119 }]
120 });
121 //设置分页控件
122 var p = $(‘#dg‘).datagrid(‘getPager‘);
123 $(p).pagination({
124 pageSize: 10,//每页显示的记录条数，默认为10
125 pageList: [5, 10, 15],//可以设置每页记录条数的列表
126 beforePageText: ‘第‘,//页数文本框前显示的汉字
127 showRefresh: false,
128 afterPageText: ‘页 共 {pages} 页‘,
129 displayMsg: ‘<span style="font-size:20px;font-weight:700"></span>当前显示 {from} - {to} 条记录 共 {total} 条记录‘
130 });
131 });
132 var editIndex = -1;//标识编辑行
133 var editField;//正在编辑的单元格所属字段
134 function onLoadSuccess() {
135 editIndex = $(‘#dg‘).datagrid(‘getRows‘).length - 1;
136 }
137 //重写editor,添加弹出框类型
138 $.extend($.fn.datagrid.defaults.editors, {
139 dialog: {
140 init: function (container, options) {
141 var editor = $(‘<input type="text"/>‘).appendTo(container);
142 editor.textbox(options);
143 container.click(function () {
144 $(‘#‘ + options[‘dlgId‘]).dialog(‘open‘);
145 editField = options[‘currField‘];
146 });
147 return editor;
148 },
149 getValue: function (target) {
150 return $(target).textbox(‘getValue‘, $(target).val());
151 },
152 setValue: function (target, value) {
153 if (value)
154 $(target).textbox(‘setValue‘, value);
155 else
156 $(target).textbox(‘setValue‘, ‘‘);
157 },
158 resize: function (target, width) {
159 $(target).textbox(‘resize‘, width);
160 },
161 destroy: function (target) {
162 $(target).textbox(‘destroy‘);
163 }
164 }
165 });
166 </script>
167 </body>
168 </html>
easyUI datagrid
页码导航栏pagination，在此处代码中与datagrid分开初始化，自定义了pagination，会导致初始页面加载两次，其原因是第一次表格加载取得总记录数total，和页码栏total值不相等，那么easyui会重新发一次请求，解决办法是可以注释掉源码中再次请求的代码
1097//if(_b3.total==0){
1098//_b3.pageNumber=0;
1099//_b4=0;
1100//}
但是还有解决办法，注释掉下面代码，没有测试呢
if(_615.total!=data.total){
_614.pagination("refresh",{total:data.total});
if(opts.pageNumber!=_615.pageNumber){
opts.pageNumber=_615.pageNumber;
_5d7(_60f);
}
}
时间： 2024-08-11 01:24:34