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>
页码导航栏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); } }