通過點(diǎn)擊jqgrid表格彈出需要的表格數(shù)據(jù)
首先對(duì)Jqgrid網(wǎng)格插件做個(gè)簡(jiǎn)要的說(shuō)明。在眾多的表格插件中,Jqgrid的特點(diǎn)是非常鮮明的。
特點(diǎn)如下:
完整的表格呈現(xiàn)與運(yùn)算功能,包含換頁(yè)、欄位排序、grouping、新增、修改及刪除資料等功能。
自定義的工具列
預(yù)設(shè)的Navigator工具列,可以很容易的使用新增、刪除、編輯、檢視及搜尋等功能。
完整的分頁(yè)功能
按下任一欄位的標(biāo)頭,皆可以該欄位為排序項(xiàng)目。無(wú)論是升序或降序皆可。
預(yù)設(shè)的action formatter,可以快速而直覺地對(duì)每筆資料做運(yùn)算。
支持多種數(shù)據(jù)格式。比如json、xml、array等。
下面通過代碼實(shí)例給大家介紹通過點(diǎn)擊jqgrid表格彈出需要的表格數(shù)據(jù),具體內(nèi)容如下所示:
首先,我們先定義一個(gè)函數(shù),然后在JQuery里面直接引用就可以了,
function GetJqGridRowValue(jgrid, code) {
var KeyValue = "";
var selectedRowIds = $(jgrid).jqGrid("getGridParam", "selarrrow");
if (selectedRowIds != "") {
var len = selectedRowIds.length;
for (var i = 0; i < len ; i++) {
var rowData = $(jgrid).jqGrid('getRowData', selectedRowIds[i]);
KeyValue += rowData[code] + ",";
}
KeyValue = KeyValue.substr(0, KeyValue.length - 1);
} else {
var rowData = $(jgrid).jqGrid('getRowData', $(jgrid).jqGrid('getGridParam', 'selrow'));
KeyValue = rowData[code];
}
return KeyValue;
}//自定義GetJqGridRowValue函數(shù)
下面是顯示表格的JS文件
$(function () {
$("#group").jqGrid({
url: '/Group/GetGroup',
datatype: 'json',
mtype: 'Get',
colNames: ['GRP_ID', 'GRP_NAME', 'GRP_DESCRIPTION'],//GROUP
colModel: [
{ key: true, hidden: true, name: 'GRP_ID', index: 'GRP_ID' },
{ key: false, name: 'GRP_NAME', index: 'GRP_NAME', editable: true },
{ key: false, name: 'GRP_DESCRIPTION', index: 'GRP_DESCRIPTION', editable: true },
],
ondblClickRow: function (rowid) {
var td_id = GetJqGridRowValue("#group", "GRP_ID");
alert(td_id);
},//點(diǎn)擊獲取gqgird的當(dāng)前列的'GRP_ID'的值
pager: jQuery('#pager1'),
rowNum: 5,
rowList: [5, 10, 15, 20],
height: '19%',
viewrecords: true,
caption: 'Group_Table',
emptyrecords: '沒有記錄顯示',
jsonReader: {
rows: 'rows',
page: 'page',
total: 'total',
records: 'records',
repeatitems: false,
id: '0',
editurl: '/Group/EditGroup'
},
autowidth: true,
multiselect: false,//是否多選
});
jQuery("#group").jqGrid('navGrid', "#pager1",
{ edit: true, add: true, del: true, position: 'left', alerttext: "請(qǐng)選擇需要操作的數(shù)據(jù)行!" },
{
zIndex: 100,
url: '/Group/EditGroup',
closeOnEscape: true,
closeAfterEdit: true,
recreateForm: true,
afterComplete: function (response) {
if (response.responseText) {
alert(response.responseText);
}
}
},
{
zIndex: 100,
url: '/Group/CreateGroup',
closeOnEscape: true,
closeAfterEdit: true,
afterComplete: function (response) {
if (response.responseText) {
alert(response.responseText);
}
}
},
{
zIndex: 100,
url: '/Group/DeleteGroup',
closeOnEscape: true,
closeAfterEdit: true,
recreateForm: true,
msg: "你確定要?jiǎng)h除么?",
afterComplete: function (response) {
if (response.responseText) {
alert(response.responseText);
}
}
}
);
});
ps:jqGrid清空表格中的所有行數(shù)據(jù)
jqGrid清空表格中數(shù)據(jù)的方法如下:
jQuery("#gridTable").jqGrid("clearGridData");
相關(guān)文章
jquery last-child 列表最后一項(xiàng)的樣式
發(fā)開中個(gè)人是比較喜歡用Repeater控件,特別是前臺(tái)可老是遇到一個(gè)問題就是一個(gè)列表的最后一項(xiàng)總是和上面的樣式不一樣 如上面的都有下邊框,最后一個(gè)就沒有2010-01-01
jquery遍歷篩選數(shù)組的幾種方法和遍歷解析json對(duì)象
本文為大家介紹下jquery遍歷篩選數(shù)組的幾種方法和遍歷解析json對(duì)象的具體實(shí)現(xiàn),感興趣的朋友不要錯(cuò)過2013-12-12
jQuery動(dòng)態(tài)生成Bootstrap表格
這篇文章主要介紹了jQuery動(dòng)態(tài)生成bootstrap表格的相關(guān)資料,非常不錯(cuò)具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2016-11-11
jquery實(shí)現(xiàn)動(dòng)態(tài)畫圓
這篇文章主要給大家分享了一段jquery實(shí)現(xiàn)動(dòng)態(tài)畫圓代碼,需要的朋友可以參考下2014-12-12
Jquery Uploadify上傳帶進(jìn)度條的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)Jquery Uploadify上傳帶進(jìn)度條的簡(jiǎn)單實(shí)例進(jìn)行了介紹,需要的朋友可以過來(lái)參考下,希望對(duì)大家有所幫助2014-02-02
jquery中$.fn和圖片滾動(dòng)效果實(shí)現(xiàn)的必備知識(shí)總結(jié)
圖片滾動(dòng)效果相信大家都使用過,看上去很簡(jiǎn)單的一個(gè)效果,如果想熟練的掌握必須知道jquery、IIFE、setInterval等基礎(chǔ)以及$.fn用法,下面這篇文章主要介紹了關(guān)于jquery中$.fn和圖片滾動(dòng)效果制作的必備知識(shí),需要的朋友可以參考下。2017-04-04

