Datagrid.html:
<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en" "http://www.w3.org/TR/html4/loose.dtd"> <br/> <HTML> <br/> <pead> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "> <br/> <title> jquery easyui </title> <br/> <LINK rel =" stylesheet "type =" text/CSS "href = ".. /themes/default/easyui.css "mce_href =" themes/default/easyui.css "> <br/> <LINK rel =" stylesheet "type =" text/CSS "href = ".. /Themes/icon.css "mce_href =" themes/icon.css "> <br/> <MCE: Script Type =" text/JavaScript "src = ".. /jquery-1.4.2.min.js "mce_src =" jquery-1.4.2.min.js "> </MCE: SCRIPT> <br/> <MCE: Script Type =" text/JavaScript "src = ".. /jquery. easyui. min. JS "mce_src =" jquery. easyui. min. JS "> </MCE: SCRIPT> <br/> <MCE: Script Type =" text/JavaScript "> <! -- <Br/>/* <br/> mergecellsbyfield: merges jquery -- easyui -- corresponding columns in the DataGrid Based on the field list. <br/> parameter 1 tableid: ID of the table to be operated; <br/> parameter 2 collist: List of columns to be merged, separated by commas (,) (for example, "name, ADDR, Code"); <br/> note: <br/> 1. used to merge the DataGrid that is only used for data presentation. <br/> 2. this function is called in onloadsuccess. before calling the function, judge whether the length of rows is greater than 0. You can choose whether to call the function at a delay based on the actual situation. <Br/> onloadsuccess: function (data) {<br/> If (data. rows. length> 0) <br/>{< br/> // mergecellsbyfield ("test", "name, ADDR, code", data ); <br/> setTimeout ("mergecellsbyfield (/" test/",/" name, code, ADDR/")", 2000 ); <br/>}< br/> yuanzy @ 2010/12/15 16:31:34 <br/> */<br/> function mergecellsbyfield (tableid, collist) {<br/> var colarray = collist. split (","); <br/> var tTable = $ ('#' + tableid); <br/> VaR Tablerowcnt = tTable. dataGrid ("getrows "). length; <br/> var tmpa; <br/> var tmpb; <br/> var pertxt = ""; <br/> var curtxt = ""; <br/> var alertstr = ""; <br/> // For (j = 0; j <= colarray. length-1; j ++) <br/> for (j = colarray. length-1; j> = 0; j --) <br/>{< br/> // reset the variable when it loops to a new column. <Br/> pertxt = ""; <br/> tmpa = 1; <br/> tmpb = 0; </P> <p> // starts from the first line (the header is 0th rows) and loops until the end of the row (overflow of one bit) <br/> for (I = 0; I <= tablerowcnt; I ++) <br/> {<br/> if (I = tablerowcnt) <br/>{< br/> curtxt = ""; <br/>}< br/> else <br/>{< br/> curtxt = tTable. dataGrid ("getrows") [I] [colarray [J]; <br/>}< br/> If (pertxt = curtxt) <br/>{< br/> tmpa + = 1; <br/>}< br/> else <br/>{< br/> tmpb + = tmpa; <br/> tTable. dataGrid ('mergecells ', {<Br/> index: I-tmpa, <br/> Field: colarray [J], <br/> rowspan: tmpa, <br/> colspan: null <br/>}); <br/> tmpa = 1; <br/>}< br/> pertxt = curtxt; <br/>}< br/> $ (function () {<br/> $ ('# test '). dataGrid ({<br/> title: 'My title', <br/> iconcls: 'icon-save', <br/> width: 600, <br/> height: 420, <br/> nowrap: false, <br/> striped: True, <br/> collapsible: True, <br/> URL: 'datagrid _ data. json', <br/> sortname: 'Code', <br/> // sortorder: 'desc', <br/> remotesort: false, <br/> idfield: 'code', <br/> onloadsuccess: function (data) {<br/> If (data. rows. length> 0) <br/>{< br/> setTimeout ("mergecellsbyfield (/" test/",/" name, code, ADDR/")", 2000 ); <br/> // mergecellsbyfield ("test", "name, code, ADDR"); <br/>}< br/>}, <br/> frozencolumns: [[<br/> {field: 'ck ', checkbox: true}, <br/> {Title: 'code', field: 'code', width: 80, sortab Le: true} <br/>], <br/> columns: [[<br/> {Title: 'base information', colspan: 3 }, <br/> {field: 'opt', Title: 'operation', width: 100, align: 'center', rowspan: 2, <br/> formatter: function (value, REC) {<br/> return '<span style = "color: Red" mce_style = "color: Red"> edit Delete </span> '; <br/>}< br/>], [<br/> {field: 'name', Title: 'name', width: 120 }, <br/> {field: 'addr ', Title: 'address', width: 120, rowspan: 2, sortable: TR UE, <br/> sorter: function (a, B) {<br/> return (A> B? 1:-1); <br/>}< br/>}, <br/> {field: 'col4', Title: 'col41', width: 150, rowspan: 2} <br/>], <br/> pagination: True, <br/> rownumbers: True, <br/> toolbar: [{<br/> ID: 'btnadd', <br/> text: 'add', <br/> iconcls: 'icon-add', <br/> handler: function () {<br/> $ ('# btnsave '). linkbutton ('enabled'); <br/> alert ('add') <br/>},{< br/> ID: 'btncut ', <br/> text: 'Cut ', <br/> iconcls: 'icon-cut', <br/> handler: function () {<br/> $ ('# btnsave '). linkbutton ('enable'); <br/> alert ('short') <br/>}< br/>}, '-', {<br/> ID: 'btnsave', <br/> text: 'save', <br/> disabled: True, <br/> iconcls: 'icon-save', <br/> handler: function () {<br/> $ ('# btnsave '). linkbutton ('disable'); <br/> alert ('save') <br/>}< br/>}] <br/> }); <br/> var P = $ ('# test '). dataGrid ('getpager'); <br/> If (p) {<br/> $ (P ). pagination ({<br/> onbeforerefresh: function () {<br/> alert ('before refresh '); <br/>}< br/> }); <br/>}< br/>}); </P> <p> // --> </MCE: SCRIPT> <br/> </pead> <br/> <body> <br/> <p> DataGrid </p> </P> <p> <Table id = "test"> </table> </P> <p> </body> <br/> </ptml>
Datagrid_data.json:
{<Br/> "Total": 239, <br/> "rows": [<br/> {"code": "001", "name ": "Name 1", "ADDR": "address 11", "col4": "col4 data" },< br/> {"code": "001 ", "name": "name 1", "ADDR": "address 13", "col4": "col4 data" },< br/> {"code ": "001", "name": "Name 3", "ADDR": "address 11", "col4": "col4 data "}, <br/> {"code": "004", "name": "name 4", "ADDR": "address 63", "col4 ": "col4 data" },< br/> {"code": "005", "name": "name 5", "ADDR": "address 45 ", "col4": "col4 data" },< br/> {"code": "005", "name": "name 6", "ADDR ": "address 16", "col4": "col4 data" },< br/> {"code": "005", "name": "name 6 ", "ADDR": "address 27", "col4": "col4 data" },< br/> {"code": "005", "name ": "Name 8", "ADDR": "address 81", "col4": "col4 data" },< br/> {"code": "009 ", "name": "name 9", "ADDR": "address 69", "col4": "col4 data" },< br/> {"code ": "010", "name": "name 10", "ADDR": "address 78", "col4 ": "col4 data"} <br/>] <br/>}