当前位置:首页 > 网站制作 > 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
}
);
}
});

效果图:

评论

评论数10

表情
发表评论
网友评论仅供其表达个人看法,并不表明网易立场。
《jQuery GridView插件(附调用方法)》更多评论

头条推荐

阅读下一篇

新老版本juqery获取radio的方法

今天换了个高版本的jquery,发现原先运行正常的方法报错了,仔细搜查后得出jquery获取radio 的方法如下:  新版本(目前1.3.2):  $("[name='radio_name'][ch ... 查看全文

返回jQuery教程 返回网站首页