Question

如何绑定JQuery插件JQgrid

Answer 1

首先下载好JQgrid的类库之后，在Layout.cshtml中引用他，那么之后我们就不需要在每一个view中都去引用相同的类库了。这里我引用了这几个文件来帮助我们开发:
<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>

接下来我们可以开始在你需要的view文件中书写以下代码，当然你可以根据喜好来配置它的属性，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>