jqgrid的官方demo大部分都是后臺(tái)分頁(yè)的。你可以一次性傳到客戶端進(jìn)行分頁(yè)。不過(guò)數(shù)據(jù)量大還是后臺(tái)分頁(yè)的好。至于排序會(huì)傳遞個(gè)sidx參數(shù)代表排序的字段，傳遞sord參數(shù)值為asc或者desc為升排序還是降排序
創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)公司是一家服務(wù)多年做網(wǎng)站建設(shè)策劃設(shè)計(jì)制作的公司,為廣大用戶提供了做網(wǎng)站、網(wǎng)站制作，成都網(wǎng)站設(shè)計(jì)，一元廣告，成都做網(wǎng)站選創(chuàng)新互聯(lián)公司，貼合企業(yè)需求，高性?xún)r(jià)比，滿足客戶不同層次的需求一站式服務(wù)歡迎致電。
目標(biāo)：實(shí)現(xiàn)一個(gè)類(lèi)似于Excel功能的Grid數(shù)據(jù)維護(hù)功能，并且就地編輯在乎的是Cell編輯而不是行編輯
候選者：easy-ui之datagrid, jqgrid, flexigrid
使用環(huán)境：jquery, bootstrap，bootstrap-datepicker
特性要求：
1. 列排序和列寬改變
2. 行顏色改變和樣式
3. 表頭排序，表頭改變順序
4. cell inline editing
5. 易于定制和擴(kuò)展
上面上個(gè)沒(méi)有沒(méi)有一個(gè)本身就能滿足所有的功能
其中easy-ui datagrid缺乏列重排序和Cell edit的功能
jqgrid缺乏列重排
flexgrid缺乏就地編輯的功能
幸運(yùn)的是它們每一個(gè)自己改改都能實(shí)現(xiàn)自己的功能，其中flexgrid個(gè)人覺(jué)得最輕量級(jí)最靈活，所以給他配上in-place edit插件，然后利用它的process回調(diào)函數(shù)，所有功能特性全部滿足了，主要是干干凈凈，看著就舒服。而且它的UI非常像EXTJS，個(gè)人非常喜歡，還有是表頭的拖拽功能，隱藏顯示功能都非常要用。
jqgrid 2008年就搞過(guò)，功能非常豐富，它處理復(fù)雜Grid，比如嵌套grid，組合表頭都很棒，但是它很多東西嚴(yán)重依賴(lài)JQuery UI來(lái)搞，皮膚都是Jquery Ui的，如果項(xiàng)目中用了JQuery UI，那么使用它作為JQuery UI在Grid方面的功能實(shí)現(xiàn)，是非常棒的；
EasyUI是近年流行的JQuery下類(lèi)ExtJS的UI庫(kù)，它提供了完整的一套UI組件，并且日趨成熟，如果整個(gè)系統(tǒng)都是由EasyUI做的，那么用EasyUI也是很棒的，但是我卻不喜歡它默認(rèn)的風(fēng)格，覺(jué)得某些方面不如EXTJS那么細(xì)膩。
JQuery是繼prototype之后又一個(gè)優(yōu)秀的Javascript庫(kù)。
jQuery采用的是MIT許可證，簡(jiǎn)單些說(shuō)，你可以免費(fèi)使用jQuery，但是，至于某些jQuery插件收不收費(fèi)，那就要看作者的想法了，如果你想開(kāi)發(fā)jQuery插件，你完全可以自己定義是否收費(fèi)的。
ASP.NET MVC 3程序如何綁定JQuery插件JQgrid
今天試用了一些JQuery的插件JQgrid，此插件能非?？旖莸膸椭覀兘⒁粋€(gè)CRUD功能的表單，并且具有分頁(yè)，排序等一些基本功能，非常好用。
下面看下實(shí)施步驟：
首先下載好JQgrid的類(lèi)庫(kù)之后，在Layout.cshtml中引用他，那么之后我們就不需要在每一個(gè)view中都去引用相同的類(lèi)庫(kù)了。這里我引用了這幾個(gè)文件來(lái)幫助我們開(kāi)發(fā):
link href="../../Scripts/JQgrid/jquery-ui-1.8.23.custom/css/ui-lightness/jquery-ui-1.8.23.custom.css" rel="stylesheet" type="text/css" /
link href="../../Scripts/JQgrid/jquery.jqGrid-4.4.1/css/ui.jqgrid.css" rel="stylesheet" type="text/css" /
script src="../../Scripts/JQgrid/jquery.jqGrid-4.4.1/js/i18n/grid.locale-en.js" type="text/javascript"/script
script src="../../Scripts/JQgrid/jquery.jqGrid-4.4.1/js/jquery.jqGrid.min.js" type="text/javascript"/script
接下來(lái)我們可以開(kāi)始在你需要的view文件中書(shū)寫(xiě)以下代碼，當(dāng)然你可以根據(jù)喜好來(lái)配置它的屬性，JQgrid的屬性非常之多，在上面的Demo示例中你可以找多更多的屬性和事件。
script type="text/javascript"
jQuery(document).ready(function () {
jQuery("#list").jqGrid({
url: '/UserView/UserMaintenance', //---necessary
datatype: 'json', //---necessary
mtype: "GET", //---necessary
//datatype: 'local', //----add
//data: mydata, // ---add
colNames: ['Name', 'ID', 'Active', 'Customer Group'], //----edit
colModel: [
{ name: 'Name', index: 'Name', width: 500, sortable: false },
{ name: 'CP_CSTMR_ID', index: 'CP_CSTMR_ID', width: 100 },
{ name: 'Active', index: 'Active', width: 100, sortable: false },
{ name: 'Customer Group', index: 'Customer Group', width: 100, sortable: false} //----edit
],
pager: '#pager',
rowNum: 10,
sortname: 'CP_CSTMR_ID',
sortable: true,
sortorder: 'asc',
rowList: [10, 15, 20],
viewrecords: true,
caption: 'User Maintenance list',
height: 230,
loadtext: 'Loading Data please wait ...',
postData:
{
name: function () { return jQuery("#name").val(); },
active: function () { return jQuery("#active option:selected").val(); }
},
onSortCol: function (index, colindex, sortorder) {
}
// gridComplete: function()
// {
// $(window).resize(function(){
// var winwidth=$(window).width()*0.5;
// $("#list").setGridWidth(winwidth);
// })
// }
});
jQuery("#list")
.jqGrid('navGrid', '#pager', { del: false, add: false, edit: false, search: false }, {}, {}, {}, { multipleSearch: false })
.navButtonAdd('#pager', {
caption: "Search",
buttonicon: "ui-icon-search",
onClickButton: function () {
},
position: "last",
id:"searchButton"
})
.navButtonAdd('#pager', {
caption: "View Detail",
buttonicon: "ui-icon-detail",
id: "viewdetails",
onClickButton: function () {
test();
},
position: "last"
})
//jQuery("#list").jqGrid('filterToolbar', options);
});
/Script
轉(zhuǎn)載僅供參考，版權(quán)屬于原作者。祝你愉快，滿意請(qǐng)采納哦
在jquery里可以直接用isNaN()，因?yàn)樗荍avaScript的類(lèi)庫(kù)。是由JavaScript語(yǔ)言寫(xiě)的。
例如：
script type="text/javascript"
$(document).ready(function(){
alert(isNaN($('#id').val()));
});
/script可以直接使用
重慶分公司
重慶分公司
