1.html:
1 | < input type = "button" id = "btn" value = "datagrid" /> |
2 | < table id = "tt" ></ table > |
2.js:
01 | $( "#btn" ).click( function (){ |
02 | $( '#tt' ).datagrid({ |
03 | striped: true , //显示背景条文 默认false |
04 | url: 'DataServlet' , //json数据源地址,要求格式 {'total':行总数,'rows':[{对象1},{对象2}...]} |
05 | columns:[[ |
06 | {field: 'code' ,title: 'Code' ,width:100}, |
07 | {field: 'name' ,title: 'Name' ,width:100}, |
08 | {field: 'price' ,title: 'Price' ,width:100,align: 'right' } |
09 | ]] , |
10 | // frozenColumns:[], //什么玩意儿??? |
11 | fitColumns: true , //自适应列宽, 默认 false |
12 | method: 'get' , //请求方法类型 默认post |
13 | nowrap: true , //数据超出列宽时自动截取 默认true |
14 | idField: 'code' , //该列是唯一列,不能出现重复数据 |
15 | loadMsg: '数据装载中...' , //默认 Processing, please wait … |
16 | pagination: false , //是否使用分页工具 默认fasle |
17 | rownumbers: true , //是否显示行数(第一列之前) 默认false |
18 | singleSelect: true , //true 则只能选中一行 默认false |
19 | // pageNumber:1, //这三个是分页参数 |
20 | // pageSize:2, //默认10 |
21 | // pageList:[5,10,15,20], //默认 [10,20,30,40,50] |
22 | queryParams:{ 'pId' :$( "#pid" ).val()} , //请求数据时额外发送的参数 默认{} |
23 | sortName: 'code' , //默认排序列 |
24 | sortOrder: 'desc' , //asc 或desc 默认前者 |
25 | remoteSort: true , //是否使用远程数据排序? 默认true |
26 | showFooter: true , //定义是否显示行底(如果是做统计表格,这里可以显示总计等)。????不懂。。。 |
27 | rowStyler: function (index,row){ //返回样式,如:'background:red' |
28 | // index 行索引从0开始, row 对应行对象 |
29 | return ; |
30 | }, |
31 | loadFilter: function (data){ //数据过滤器 data:原始数据。可以将原始数据改变为规范的数据格式 |
32 | //该函数必须返回包含 'total'和'rows'属性的标准数据对象。 |
33 | } |
34 | //editors: {} //定义当编辑一行时的编辑模式。 默认predefined editors ????不懂。。。 |
35 | //view:{} //定义数据表格的视图。 ????不懂。。。 |
36 | }); |
37 | }); |
【一下大量代码抄袭网络】
001 | /* |
002 | var initDatagrid = function(){ |
003 | $dg = $("#tt"); |
004 | $dg.datagrid({ |
005 | title:'Datagrid测试', |
006 | width:700, |
007 | height:400, |
008 | url:'DataServlet', |
009 | columns :[[ {field : 'code',title : 'Code',width : 100,editor : "validatebox"}, |
010 | {field : 'name',title : 'Name',width : 200,editor : "validatebox"}, |
011 | {field : 'price',title : 'Price',width : 200,align : 'right',editor : "numberbox"} |
012 | ]], |
013 | toolbar:[{ |
014 | text : "添加", |
015 | iconCls : "icon-add", |
016 | handler : function() { |
017 | $('#winAdd').window('open'); |
018 | $('#ff').show(); |
019 | $('#ff').form('clear'); |
020 | $('#ff').appendTo('#aa'); |
021 | } |
022 | },{ |
023 | text : "删除", |
024 | iconCls : "icon-remove", |
025 | handler : function() { |
026 | |
027 | } |
028 | }] |
029 | }); |
030 | }; |
031 |
032 | var add = function(){ |
033 | //数据提交后台 |
034 | //datagrid 刷新一次 |
035 | }; |
036 |
037 | $(function(){ |
038 | initDatagrid(); |
039 | }); |
040 |
041 |
042 |
043 |
044 |
045 |
046 |
047 |
048 |
049 |
050 |
051 |
052 |
053 | /* |
054 | var initDatagrid = function(){ |
055 | var $dg = $("#dg"); |
056 | $dg.datagrid({ |
057 | url : "DataServlet", |
058 | width : 700, |
059 | height : 400, |
060 | columns : [[ {field : 'code',title : 'Code',width : 100,editor : "validatebox"}, |
061 | {field : 'name',title : 'Name',width : 200,editor : "validatebox"}, |
062 | {field : 'price',title : 'Price',width : 200,align : 'right',editor : "numberbox"} |
063 | ]], |
064 | toolbar : [ { |
065 | text : "添加", |
066 | iconCls : "icon-add", |
067 | handler : function() { |
068 | $dg.datagrid('appendRow', {}); //添加一空行 |
069 | var rows = $dg.datagrid('getRows'); //返回当前页的记录。 |
070 | $dg.datagrid('beginEdit', rows.length - 1); //对最后一行(即新增的空行)开启编辑 |
071 | } |
072 | },'-', { |
073 | text : "编辑", |
074 | iconCls : "icon-edit", |
075 | handler : function() { |
076 | var row = $dg.datagrid('getSelected');//获取当前选择行 |
077 | if (row) { |
078 | var rowIndex = $dg.datagrid('getRowIndex', row); |
079 | $dg.datagrid('beginEdit', rowIndex);//根据行索引开启编辑 |
080 | } |
081 | } |
082 | }, { |
083 | text : "删除", |
084 | iconCls : "icon-remove", |
085 | handler : function() { |
086 | var row = $dg.datagrid('getSelected'); |
087 | if (row) { |
088 | var rowIndex = $dg.datagrid('getRowIndex', row); |
089 | $dg.datagrid('deleteRow', rowIndex); //接下来可以在后面加方法进行后台删除 |
090 | } |
091 | } |
092 | }, { |
093 | text : "结束编辑", |
094 | iconCls : "icon-cancel", |
095 | handler : function(){ |
096 | var rows = $dg.datagrid('getRows'); |
097 | for ( var i = 0; i < rows.length; i++) { |
098 | $dg.datagrid('endEdit', i); |
099 | } |
100 | } |
101 | }, { |
102 | text : "保存", |
103 | iconCls : "icon-save", |
104 | handler : function() { |
105 | |
106 | var rows = $dg.datagrid('getRows'); |
107 | for ( var i = 0; i < rows.length; i++) { |
108 | $dg.datagrid('endEdit', i); |
109 | } |
110 | |
111 | if ($dg.datagrid('getChanges').length) {//先判断是否有改动 |
112 | var inserted = $dg.datagrid('getChanges', "inserted"); |
113 | var deleted = $dg.datagrid('getChanges', "deleted"); |
114 | var updated = $dg.datagrid('getChanges', "updated"); |
115 |
116 | var effectRow = new Object(); |
117 | if (inserted.length) { |
118 | effectRow["inserted"] = JSON.stringify(inserted); |
119 | } |
120 | if (deleted.length) { |
121 | effectRow["deleted"] = JSON.stringify(deleted); |
122 | } |
123 | if (updated.length) { |
124 | effectRow["updated"] = JSON.stringify(updated); |
125 | } |
126 |
127 | $.post("DataServlet", effectRow, function(rsp) { |
128 | $dg.datagrid('acceptChanges'); |
129 | if (rsp.status) { |
130 | $.messager.alert("提示", "提交成功!"); |
131 | $dg.datagrid('acceptChanges'); |
132 | } |
133 | }, "JSON").error(function() { |
134 | $.messager.alert("提示", "提交错误了!"); |
135 | }); |
136 | } |
137 | } |
138 | } ] |
139 | }); |
140 |
141 | } |
142 |
143 |
144 | $(function(){ |
145 | initDatagrid(); |
146 | |
147 | }); |
148 |
149 | <table id="dg" title="批量操作"></table> */ |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 | $( function () { |
159 | $( "#btn" ).click( function (){ |
160 | $( '#tt' ).datagrid({ |
161 | striped: true , //显示背景条文 默认false |
162 | url: 'DataServlet' , //json数据源地址,要求格式 {'total':行总数,'rows':[{对象1},{对象2}...]} |
163 | columns:[[ |
164 | {field: 'ck' ,checkbox: true }, //复选框 |
165 | {field: 'oid' ,title: '选择' ,width: 20,formatter: function (value, rowData, rowIndex){ return '<input type="radio" name="selectRadio" id="selectRadio"' + rowIndex + ' value="' + rowData.oid + '" />' ; |
166 | }}, |
167 | {field: 'code' ,title: 'Code' ,width:100}, |
168 | {field: 'name' ,title: 'Name' ,width:100}, |
169 | {field: 'price' ,title: 'Price' ,width:100,align: 'right' } |
170 | ]] , |
171 | frozenColumns:[[ |
172 | {field: 'ck' ,checkbox: true } |
173 | ]], //什么玩意儿??? |
174 | fitColumns: false , //自适应列宽, 默认 false |
175 | method: 'post' , //请求方法类型 默认post |
176 | nowrap: true , //数据超出列宽时自动截取 默认true |
177 | idField: 'code' , //该列是唯一列,不能出现重复数据 |
178 | loadMsg: '数据装载中...' , //默认 Processing, please wait … |
179 | pagination: false , //是否使用分页工具 默认fasle |
180 | rownumbers: true , //是否显示行数(第一列之前) 默认false |
181 | singleSelect: true , //true 则只能选中一行 默认false |
182 | // pageNumber:1, //这三个是分页参数 |
183 | // pageSize:2, //默认10 |
184 | // pageList:[5,10,15,20], //默认 [10,20,30,40,50] |
185 | // queryParams:{'pId':$("#pid").val()} , //请求数据时额外发送的参数 默认{} |
186 | // sortName:'code' , //默认排序列 |
187 | // sortOrder:'desc', //asc 或desc 默认前者 |
188 | // remoteSort:true , //是否使用远程数据排序? 默认true |
189 | // showFooter:true, //定义是否显示行底(如果是做统计表格,这里可以显示总计等)。????不懂。。。 |
190 | // rowStyler:function(index,row){ //返回样式,如:'background:red' |
191 | // index 行索引从0开始, row 对应行对象 |
192 | // return ; |
193 | // }, |
194 | // loadFilter:function(data){ //数据过滤器 data:原始数据。可以将原始数据改变为规范的数据格式 |
195 | //该函数必须返回包含 'total'和'rows'属性的标准数据对象。 |
196 | // } |
197 | //editors: {} //定义当编辑一行时的编辑模式。 默认predefined editors ????不懂。。。 |
198 | //view:{} //定义数据表格的视图。 ????不懂。。。 |
199 | |
200 | |
201 | onDblClickRow: function (){ //双击事件 |
202 | var selected = $( '#tt' ).datagrid( 'getSelected' ); //获取选中行 |
203 | if (selected){ |
204 | alert(JSON.stringify(selected)); |
205 | var index = $( '#tt' ).datagrid( 'getRowIndex' , selected); //获取选中行索引 |
206 | alert( "to delete row: " +index); |
207 | $( '#tt' ).datagrid( 'deleteRow' , index); //前台删除行 |
208 | } |
209 | } |
210 | }); |
211 | }); |
212 |
213 | |
214 | }); |