.引用相關頭文件
引入CSS:
<link href="Scripts/jquery-ui-1.8.1.custom.css" rel="stylesheet" type="text/css" />
<link href="Scripts/ui.jqgrid.css" rel="stylesheet" type="text/css" />
引入JS:
<script src="Scripts/jquery-1.5.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui.min.js" type="text/javascript"></script>
<script src="Scripts/grid.locale-en.js" type="text/javascript"></script>
<script src="Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>
因為jqGrid3.6及以后的版本集成了jQuery UI,所以,此處需要導入UI相關js和css。另外grid.locale-en.js這個語言文件必須在jquery.jqGrid.min.js之前加載,否則會出問題。
2.將jqgrid加入頁面中
根據jqGrid的文檔,要想生成一個jqGrid,最直接的方法就是:
$("#list").jqGrid(options);
其中list是頁面上的一個table:<table id="list"></table>
下面是一個簡單的例子:
<script type="text/javascript">
$(document).ready(function () {
jQuery("#list").jqGrid({
url: 'Handler.ashx',
datatype: "json",
mtype: 'GET',
colNames: ['SalesReasonID', 'Name', 'ReasonType', 'ModifiedDate'],
colModel: [
{ name: 'SalesReasonID', index: 'SalesReasonID', width: 40, align: "left", editable: true },
{ name: 'Name', index: 'Name', width: 100, align: "center" },
{ name: 'ReasonType', index: 'ReasonType', width: 100, align: "center" },
{ name: 'ModifiedDate', index: 'ModifiedDate', width: 150, align: "center", search: false }
],
rowList: [10, 20, 30],
sortname: 'SalesReasonID',
viewrecords: true,
sortorder: "desc",
jsonReader: {
root: "griddata",
total: "totalpages",
page: "currpage",
records: "totalrecords",
repeatitems: false
},
pager: jQuery('#pager'),
rowNum: 5,
altclass: 'altRowsColour',
//width: 'auto',
width: '500',
height: 'auto',
caption: "DemoGrid"
}).navGrid('#pager', { add: true, edit: true, del: true,search:false,refresh:false }); ;
})
二、 jqgrid的重要選項
具體的options參考,可以訪問jqGrid文檔關于option的章節(http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options)。其中有幾個是比較常用的,重點介紹一下:
2.1 prmNames選項
prmNames是jqGrid的一個重要選項,用于設置jqGrid將要向Server傳遞的參數名稱。其默認值為:
prmNames : {
page:"page", // 表示請求頁碼的參數名稱
rows:"rows", // 表示請求行數的參數名稱
sort: "sidx", // 表示用于排序的列名的參數名稱
order: "sord", // 表示采用的排序方式的參數名稱
search:"_search", // 表示是否是搜索請求的參數名稱
nd:"nd", // 表示已經發送請求的次數的參數名稱
id:"id", // 表示當在編輯數據模塊中發送數據時,使用的id的名稱
oper:"oper", // operation參數名稱
editoper:"edit", // 當在edit模式中提交數據時,操作的名稱
addoper:"add", // 當在add模式中提交數據時,操作的名稱
deloper:"del", // 當在delete模式中提交數據時,操作的名稱
subgridid:"id", // 當點擊以載入數據到子表時,傳遞的數據名稱
npage: null,
totalrows:"totalrows" // 表示需從Server得到總共多少行數據的參數名稱,參見jqGrid選項中的rowTotal
}
2.2 jsonReader選項
jsonReader是jqGrid的一個重要選項,用于設置如何解析從Server端發回來的json數據,如果Server返回的是xml數據,則對應的使用xmlReader來解析。jsonReader的默認值為:
jsonReader : {
root: "rows", // json中代表實際模型數據的入口
page: "page", // json中代表當前頁碼的數據
total: "total", // json中代表頁碼總數的數據
records: "records", // json中代表數據行總數的數據
repeatitems: true, // 如果設為false,則jqGrid在解析json時,會根據name來搜索對應的數據元素(即可以json中元素可以不按順序);而所使用的name是來自于colModel中的name設定。
cell: "cell",
id: "id",
userdata: "userdata",
subgrid: {
root:"rows",
repeatitems: true,
cell:"cell"
}
}
假如有下面一個json字符串:
{"totalpages":"3","currpage":"1","totalrecords":"11","griddata":[{"SalesReasonID":"1","Name":"Price","ReasonType":"Other","ModifiedDate":"1998年6月1日"},{"SalesReasonID":"2","Name":"On Promotion","ReasonType":"Promotion","ModifiedDate":"1998年6月1日"},{"SalesReasonID":"3","Name":"Magazine Advertisement","ReasonType":"Marketing","ModifiedDate":"1998年6月1日"},{"SalesReasonID":"4","Name":"Television Advertisement","ReasonType":"Marketing","ModifiedDate":"1998年6月1日"},{"SalesReasonID":"5","Name":"Manufacturer","ReasonType":"Other","ModifiedDate":"1998年6月1日"}]}
其對應的jsonReader為:jsonReader: {
root: "griddata",
total: "totalpages",
page: "currpage",
records: "totalrecords",
repeatitems: false
}
注:cell、id在repeatitems為true時可以用到,即每一個記錄是由一對id和cell組合而成,即可以適用另一種json結構。援引文檔中的例子:
repeatitems為true時:
jQuery("#gridid").jqGrid({
...
jsonReader : {
root:"invdata",
page: "currpage",
total: "totalpages",
records: "totalrecords"
},
...
});
json結構為:
{
"totalpages": "xxx",
"currpage": "yyy",
"totalrecords": "zzz",
"invdata" : [
{"id" :"1", "cell" :["cell11", "cell12", "cell13"]}, // cell中不需要各列的name,只要值就OK了,但是需要保持對應
{"id" :"2", "cell" :["cell21", "cell22", "cell23"]},
...
]
}
repeatitems為false時:
jQuery("#gridid").jqGrid({
...
jsonReader : {
root:"invdata",
page: "currpage",
total: "totalpages",
records: "totalrecords",
repeatitems: false,
id: "0"
},
...
});
json結構為:
{
"totalpages" : "xxx",
"currpage" : "yyy",
"totalrecords" : "zzz",
"invdata" : [
{"invid" : "1","invdate":"cell11", "amount" :"cell12", "tax" :"cell13", "total" :"1234", "note" :"somenote"}, // 數據中需要各列的name,但是可以不按列的順序
{"invid" : "2","invdate":"cell21", "amount" :"cell22", "tax" :"cell23", "total" :"2345", "note" :"some note"},
...
]
}
2.3 colModel的重要選項
colModel也有許多非常重要的選項,在使用搜索、排序等方面都會用到。這里先只說說最基本的。
三、 注意事項
1. 動態改變Add Form或者Edit Form中的select的內容,如:改變下圖中的Comparator下拉中的內容。
$("#list_d").navGrid('#pager_d',{add:true,edit:true,del:true,search:false,refresh:false},
{
checkOnSubmit:false, closeAfterEdit: true,recreateForm:true,
beforeInitData:function(formid){
initComparator();
},
beforeShowForm: function(formid){
$("#list_d").jqGrid('setColProp', 'Name', { editrules:{required:false},});
$('#tr_Name', formid).hide();
}
},//edit
{},//add
{}//del
)
beforeInitData, beforeShowForm在每次點擊編輯的時候都會執行。initComparator的作用是通過ajax獲取數據,然后利用$("#list_d").jqGrid('setColProp', 'Comparator', { editoptions: { value: valueString} });來設置Comparator下拉中的內容。其中valueString的格式如下’ equal to: equal to; not equal to: not equal to’。鍵值之間用冒號隔開,2項之間用分號隔開。注意:把recreateForm設為true,否則'setColProp'只在第一次調用時有效。
2. var rowNum = parseInt($(this).getGridParam("records"), 10); 得到數據條數。
3. jQuery("#list_d").clearGridData();清空數據。
4. jQuery("#list").getCell(ids,"Key");獲取第ids行的key列。
5. $("#list").jqGrid('setSelection', "1");選中第一行。放在loadComplete:中在gird加載完成的時候自動選中第一行。loadComplete:function(data){$("#list").jqGrid('setSelection', "1");
}
6. 對于像1中的可編輯的字段,可以設定rule,參見http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules#editrules
7. 修改Option,以URL為例
jQuery("#list_d").jqGrid('setGridParam',{url:"xxx.aspx",page:1}).trigger('reloadGrid');
享一款jQuery表格插件,今天我要介紹的不是DataTables,而是相對沒有那么出名的jqGrid,它基于jquery UI主題,同時也支持Bootstrap,能夠根據需求使用不同主題。兼容目前主流瀏覽器,有豐富的配置項和方法事件接口,能夠輕松應對一般的表格需求,功能強大,擴展方便,支持多語言。
1、下載及引入jqGrid
https://github.com/tonytomov/jqGrid
下載jqGrid后,把文件存放到你項目的任意目錄中,使用時引入js、css即可,下面以引入Bootstrap樣式為例,i18n下的js為語言包,需要注意的是請務必把語言包放在jqGrid的js之前引入,以免后續出現問題。
2、初始化表格
頁面中輸入<table id="grid-table"></table><div id="grid-pager"></div>,頁面基本就這樣,然后在js中配置相關信息初始化表格。
下圖opt的基本參數,請到api文檔查看更多配置屬性
在opt中還有一個表格配置屬性colModel,該屬性就是我們要展示的表頭,數據等信息的配置,下圖是一個簡單的例子。
后臺需要返回如下格式的json數據,page為當前頁數,records為總共有多少條數據,rows為數據,total為總共頁數
最后我們配置完成后是這樣的。
刷新頁面后大概就是下面的樣子,沒有真實姓名之后的列和導航欄中的工具按鈕。
想要配置工具按鈕也很簡單,配置以下信息即可,內置按鈕有新增、編輯、刪除、搜索、刷新、查看按鈕,可以添加自定義按鈕,內置按鈕也可以重寫其方法,能夠方便的實現我們想要的功能。
3、新增、編輯、刪除功能
大致可以分為彈窗和內聯兩種操作,可以自己進行自定義,也可以跳轉頁面進行新增、編輯
彈窗
內聯
4、頁腳匯總和分組
5、分頁
分頁方式有兩種,導航分頁和無限滾動分頁
導航分頁
無限滾動分頁
6、其他
還有很多其他的功能如多選、單選、多層次結構展示、排序、搜索過濾等。唯一的缺陷是樹形表格,目前它的樹形表格配置繁瑣,也存在比較的的問題,但也還勉強能接受,希望樹形表格在以后能夠有所改善。
API文檔:http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs
在線演示:http://www.guriddo.net/demo/bootstrap/
、表格樹控件 jqGrid
jqGrid 是一個用來顯示網格數據的jQuery插件,文檔比較全面。
它的主要特點包括:
基于jquery UI主題,開發者可以根據客戶要求更換不同的主題
兼容目前所有流行的web瀏覽器
Ajax分頁,可以控制每頁顯示的記錄數
支持XML,JSON,數組形式的數據源
提供豐富的選項配置及方法事件接口
支持表格排序,支持拖動列、隱藏列
支持滾動加載數據
支持實時編輯保存數據內容
支持子表格及樹形表格
主頁:http://www.trirand.com/blog/
2、搜索補全 Bootstrap Search Suggest
這是一個基于 bootstrap 按鈕式下拉菜單組件的搜索建議插件,必須使用于按鈕式下拉菜單組件上。
它的主要功能包括:
搜索方式:從 data.value 的有效字段數據中查詢 keyword 的出現,或字段數據包含于 keyword 中
支持單關鍵字、多關鍵字的輸入搜索建議,多關鍵字可自定義分隔符
支持按 data 數組數據搜索、按 URL 請求搜索和按首次請求URL數據并緩存搜索三種方式
單關鍵字會設置 data-id 和輸入框內容兩個值,以 indexId/idField 和 indexKey/idFiled 取值 data 的數據為準;多關鍵字只設置輸入框值
主頁:https://github.com/lzwme/bootstrap-suggest-plugin
3、代碼編輯器 CodeMirror
CodeMirror 是一個靈活的文本代碼編輯器。它是專門用于編輯代碼,并附帶一些語言模塊和插件,實現更先進的編輯功能。提供豐富的API接口和CSS主題
它有如下特點:
支持超過100種語言
一個強大的,可組合的語言模式系統
自動完成(XML)
代碼折疊
搜索和替換接口
混合字體大小和樣式
各種主題
可以調整大小以適應內容
內聯和塊部件
許多擴展的方法和插件 ...
主頁:http://codemirror.net/
4、富文本編輯器 Simditor
Simditor是Tower開源的所見即所得的在線富文本編輯器。它是一款十分優秀的國產富文本編輯器。Simditor的理念是保持簡單,避免過度的功能,每一個特性都追求極致的用戶體驗。同時,Simditor也很容易擴展。
主頁:https://github.com/mycolorway/simditor
5、旁注插件 Marginotes
Marginotes,使用jQuery實現的添加旁注插件,快速,炫酷。
主頁:https://github.com/fdansv/marginotes
6、側邊欄 Slidebars
Slidebars是一個jQuery框架,用于為你的網頁或web應用添加off-canvas菜單和側邊欄
主頁:https://github.com/adchsm/Slidebars
7、動畫 anime.js
anime.js是一個靈活輕便的JavaScript動畫庫。它通過CSS,獨立變換,SVG,DOM屬性和JS對象實現。
主頁:https://github.com/juliangarnier/anime
8、圖像燈箱插件 Lightgallery.js
Lightgallery.js是一個功能齊全的JavaScript圖像燈箱插件。
他的主要特點:
它使用CSS,使用唯一的方法調整大小的圖像和視頻。因此,它非常靈活的,并且比使用JavaScript方法快。
它帶有內置模塊,如縮略圖,全屏,變焦等幾個很容易創建使用的模塊,還可以分離你不希望使用的模塊。
它配備了眾多的選項,讓你很輕松的自定義插件。
它使用硬件加速 CSS3過渡的動畫性能。
主頁:https://github.com/sachinchoolur/lightgallery.js
9、創建工具提示樣式的工具欄 Toolbar.Js
Toolbar.Js可以讓你在Web應用程序和網站,快速創建工具提示風格的工具欄。
它有如下特點:
簡單的實現,簡單的選項。
包括與工具欄使用一組CSS按鈕。
您可以根據需要運行盡可能多的工具欄。
工具欄可以連接到所需的任何元素。
工具欄中的圖標很容易通過圖標庫定制。
豐富的選項,讓你可以完整控制包括位置,動畫和事件等。
主頁:http://paulkinzett.github.io/toolbar/
10、樹插件 zTree
zTree 是一個依靠 jQuery 實現的多功能 “樹插件”。優異的性能、靈活的配置、多種功能的組合是 zTree 最大優點。
將核心代碼按照功能進行了分割,不需要的代碼可以不用加載
采用了 延遲加載 技術,上萬節點輕松加載,即使在 IE6 下也能基本做到秒殺
兼容 IE、FireFox、Chrome、Opera、Safari 等瀏覽器
支持 JSON 數據
支持靜態 和 Ajax 異步加載節點數據
支持任意更換皮膚 / 自定義圖標(依靠css)
支持極其靈活的 checkbox 或 radio 選擇功能
提供多種事件響應回調
靈活的編輯(增/刪/改/查)功能,可隨意拖拽節點,還可以多節點拖拽喲
在一個頁面內可同時生成多個 Tree 實例
簡單的參數配置實現 靈活多變的功能
主頁:http://www.treejs.cn/
這次就到這里,下次繼續,請多多關注,謝謝。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。