1、使用xml、json作為數(shù)據(jù)源；
2、可進(jìn)行單元格內(nèi)容格式化；
3、可在單元格或行上各綁定一個(gè)事件；
4、分頁導(dǎo)航；
5、外觀全部使用css控
源碼插件下載：jQuery-GridView.Alpha2.rar
使用前必須引用一個(gè)jQuery pagination插件，下載中已有；
還沒有實(shí)現(xiàn)自定義顯示列和自定義排序，仿照目標(biāo)是Extjs的Grid；
| 以下為引用的內(nèi)容： //不帶分頁的表格 $.ajax({ url: "XMLFile1.xml" , success: function(data) { $("#grid").gridview( data //傳入數(shù)據(jù)，這里是xml ,{ root: "root1" //指定數(shù)據(jù)的根目錄 , row: "table" //指定行標(biāo)記（只有xml文檔才有） , fields: [//列定義 { data: "id", text: "ID" } , { data: "name" //數(shù)據(jù)列 , text: "名字" //表頭顯示的文本 , dataFormat: //格式化數(shù)據(jù)顯示，指定此屬性時(shí)，data屬性將失效。 function(row){return "<a href=#"+row.children("id").text()+ ">"+row.children("name").text()+"</a>" } } , { text: "操作" , dataFormat: function(row){return "<font color=red>刪除</font>"} ,listeners:{//在單元個(gè)上綁定事件 event:"click" ,fn:function(row,events){ alert("單元格事件，ID是："+row.children("id").text()) } } } ] , listeners:{//在行上綁定事件 event:"click" ,fn:function(row){ alert("行事件，ID是："+row.children("id").text())} } , id: "tab" //表格ID , css: "tabcls" //表格的css } ); } }); |
效果圖：
程序員人生，我編程，我富裕，記住wfuyu網(wǎng)，php教程，php學(xué)習(xí)，php手冊(cè)，CMS模版制作
聲明：本站大部分內(nèi)容是作者原創(chuàng)，少部分收集于互聯(lián)網(wǎng)供大家一起學(xué)習(xí)，原版權(quán)很多不明，如有侵權(quán)請(qǐng)聯(lián)系本站，謝謝！
粵ICP備14040726號(hào)-1?? 2015-2020 程序員人生 版權(quán)所有
