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>
分享到:
相关推荐
flexgrid use flexgrid use flexgrid use flexgrid use flexgrid use flexgrid use flexgrid use flexgrid use flexgrid use flexgrid use flexgrid use flexgrid use flexgrid use flexgrid use flexgrid use
flexgrid是很不错的插件,显示数据很不错,速度很快的
jquery-flexgrid
当我第一次不得不使用flexgrid控件时,发现在互联网上没有相关的合适的文档时,让我很困扰。而那些可利用的对我来说,又太复杂。...本代码是帮助那些想在自己用VC++摆弄些的程序中使用flexgrid控件的人们。
flexgrid的简单实例,数据为简单的模拟数据,不涉及数据库,可以进行增删改操作
利用FlexGrid开发经验总结,非常不错的资料,不好找哦
这是我使用flexgrid控件的一个示范工程,用VB开发,希望与大家分享EMAIL:xiaochuan_yuan@hotmail.com
FlexGrid自定义列标题 FlexGrid自定义列标题 FlexGrid自定义列标题 FlexGrid自定义列标题
c1中的FLEXGRID控件的大部分功能,非常实用和简洁。
flexgrid是一个易用且功能强大的前端js表格,可实现常见的所有功能,强大到出乎你的想像。强烈建议在项目中使用。
ComponentOne FlexGrid for Windows Forms的详细教程,包括基本设置、设计时支持、设置和编辑单元格、概述和汇总数据、数据过滤、打印等操作的详细说明和代码示例,并给出了数十个使用经验和技巧。
ComponentOne 2012V3还针对WinForm平台主要控件-FlexGrid和Chart制作了包含了近20万字的中文帮助文档,产品的每一功能进行了细致的介绍并提供示例代码,便于开发人员的学习和使用。 我们借此机会编写 C1FlexGrid 和...
flexgrid滚轮示例
一个好用的flexgrid
FlexGrid的升序和降序排列 FlexGrid的升序和降序排列 FlexGrid的升序和降序排列 FlexGrid的升序和降序排列
jquery flexgrid demo & source code
C1FlexGrid绘制柱形图,VB.NET实现。
这个实例代码演示了在FlexGrid控件中支持以任意行列、全字匹配和大小写匹配的查询功能。
好好的flexgrid组件就这样断更,给大家留着希望能够帮助你,此外还加了些例子,希望都用其拉