FlexGrid自己用的经验
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); id =item.id.substr(3); //flexgrid自动会把列的id设置为'row'+返回记录的id，所以要去掉前面无用的字符 if($.browser.msie){ name= item.cells.innerText; }else{ name= item.cells.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.split("=");String[] tmp2 = str.split("=");String[] tmp3 = str.split("=");companyName = tmp.length>1?tmp:"" ;telephone = tmp2.length>1?tmp2:"" ;account = tmp3.length>1?tmp3:"" ;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>
页:
[1]