当前位置：首页 > 网站制作 > jQuery教程 > jQuery GridView插件(附调用方法)

jquerygridview jQuery GridView插件(附调用方法)

2017-01-06 |　来源:网络 | 人气： | | 关键字： jquerygridview 如何调用jquery插件

1、使用xml、json作为数据源； 2、可进行单元格内容格式化； 3、可在单元格或行上各绑定一个事件； 4、分页导航； 5、外观全部使用css控源码插件下载：jQuery-GridView.Alph

1、使用xml、json作为数据源；
2、可进行单元格内容格式化；
3、可在单元格或行上各绑定一个事件；
4、分页导航；
5、外观全部使用css控

源码插件下载：jQuery-GridView.Alpha2.rar

使用前必须引用一个jQuery pagination插件，下载中已有；
还没有实现自定义显示列和自定义排序，仿照目标是Extjs的Grid；

以下为引用的内容：
//不带分页的表格
$.ajax({
url:"XMLFile1.xml"
,success:function(data){
$("#grid").gridview(
data//传入数据，这里是xml
,{
root:"root1"//指定数据的根目录
,row:"table"//指定行标记（只有xml文档才有）
,fields:[//列定义
{data:"id",text:"ID"}
,{
data:"name"//数据列
,text:"名字"//表头显示的文本
,dataFormat://格式化数据显示，指定此属性时，data属性将失效。
function(row){return"<ahref=#"+row.children("id").text()+
">"+row.children("name").text()+"</a>"
}
}
,{
text:"操作"
,dataFormat:
function(row){return"<fontcolor=red>删除</font>"}
,listeners:{//在单元个上绑定事件
event:"click"
,fn:function(row,events){
alert("单元格事件，ID是："+row.(wWw.AlonelY.coM.cn)children("id").text())
}
}
}
]
,listeners:{//在行上绑定事件
event:"click"
,fn:function(row){
alert("行事件，ID是："+row.children("id").text())}
}
,id:"tab"//表格ID
,css:"tabcls"//表格的css
}
);
}
});

效果图：