FlexGrid自己用的经验

zjnbshifox

FlexGrid是一个很好的jQuery插件。下面建立一个FlexGrid
  $(document).ready(function(){      var url = "companyName=" + $("#companyName").val()  +"&telephone="+$("#telephone").val() + "&account="+$("#account").val();      $("#results").flexigrid({  //id和html元素一致    url: 'SearchCmp.do',dataType: 'json' ,query:url,colModel : [{display: '企业名称', name : 'name', width : 180, sortable : true, align: 'left'},{display: '帐号', name : 'account', width : 80, sortable : true, align: 'left'},{display: '联系人', name : 'contact', width : 80, sortable : true, align: 'left'},{display: '电话', name : 'telephone', width : 40, sortable : true, align: 'left'},{display: '截止日期', name : 'expire', width : 40, sortable : true, align: 'left'},{display: '黑名单', name : 'black', width : 20, sortable : true, align: 'left'},{display: 'VIP', name : 'vip', width : 20, sortable : true, align: 'left'}],buttons: [{                    name: '确定',                    bclass: 'add',                    onpress: selectok //行选择后的操作                }],  usepager: true,title: '查询结果',useRp: true,rp: 20,singleSelect: true, //仅允许选择单行width: 500,height: 200,resizable: false,pagestat: '显示 {from} 到 {to} 条， 共{total}条记录',  procmsg: '正在获取数据，请稍候 ...'});   function selectok(com,grid){if ($(".trSelected").length==1) {var id="";                                                   var name="";                            var item = $('.trSelected',grid)[0];                            id =item.id.substr(3);                            //flexgrid自动会把列的id设置为'row'+返回记录的id，所以要去掉前面无用的字符                            if($.browser.msie){                            name= item.cells[0].innerText;                            }else{                             name= item.cells[0].textContent;                           }                                             $("#companyName").val(name);                            $("#companyName",parent.document).val(name);                             //因为查询窗口是通过thickbox打开的子窗口，所以，需要更新到父窗口中                           $("#compid",parent.document).val(id);                           //更新到父窗口                           self.parent.tb_remove();                    }                    else {                        alert("你没有选择企业或者数量不对");                    }}  })
这里注意，提交上的URL并不是三个参数，而是只有一个，参数的名称是query，需要在代码中拆开，并且还会有2个参数做分页page和rp（每页几条记录）
String[] str = query.split("&");String[] tmp = str[0].split("=");String[] tmp2 = str[1].split("=");String[] tmp3 = str[2].split("=");companyName = tmp.length>1?tmp[1]:"" ;telephone = tmp2.length>1?tmp2[1]:"" ;account = tmp3.length>1?tmp3[1]:"" ;page = page<1?1:page;rp=rp<20?20:rp;
返回的JSON数据格式和Extjs的也不一样
  {page:1, #表示当前页面total:5, #总共多少记录rows: [{id:'8a9306f61f35bc99011f35cf6af60001', #这里的id会作为表格行的id，格式为'row'+id，cell:['测试', //总共多少列和客户端代码的列数一致'1161','综合性','2009-02-07','阿斯顿']},{id:'8a9306f61f81b26c011f81b3910a0001',cell:['演示','1164','综合性','2009-02-21','演示']},{id:'8aca88521f4acf9d011f7e44b0520008',cell:['演示','1163','综合','2009-02-28','演示招聘会']},{id:'8aca88521de6f8f2011de700bb870004',cell:['宁波','1160','毕会','2009-01-09','宁波会']},{id:'8aca88521f4acf9d011f5ed4b1e20001',cell:['周六','1162','综合','2009-02-14','']}]}
最后页面上需要有一个容器显示表格：
<table id="results" style="display:none"></table>