easyUI datagrid editor扩展dialog

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',  100, rowspan: 2 },
 22             { title: 'B', colspan: 3 },
 23             { title: 'C', colspan: 3 }
 24         ], [
 25             {
 26                 field: 'a', title: 'a',  100, editor: {
 27                     type: 'textbox',
 28                     options: {
 29                         required: true,
 30                         missingMessage: '*必填*'
 31                     }
 32                 }
 33             },
 34             {
 35                 field: 'b', title: 'b',  100, editor: {
 36                     type: 'datebox'
 37                 }
 38             },
 39             {
 40                 field: 'c', title: 'c',  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',  100, editor: {
 50                     type: 'numberbox',
 51                     options: { precision: 1 }
 52                 }
 53             },
 54             { field: 'e', title: 'e',  100, editor: { type: 'checkbox', options: { on: '1', off: '0' } } },
 55              {
 56                  field: 'f', title: 'f',  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                  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                  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);
}
}