如何绑定JQuery插件JQgrid

ASP.NET MVC 3程序如老羡何绑定JQuery插件JQgrid

今天试用了一些JQuery的插件JQgrid，此插件能非常快捷的帮助我们建立一个CRUD功能的表单，并且具有分页，排序等一些基本功能，非常好用。

下面看下实施步骤：

首先下载好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>

转载仅供参考，版权属于原作者。祝你愉快，满意请采纳哦

使用当前页面的location去做下载是不对的，你可以使用iframe。

$('.btn-download').click(function(){

    var s = jQuery('#grid').jqGrid('getGridParam','selarrrow')

    url = 樱激$(this).attr('action')

    $each(s, function(k, v){

        $('body').append('<iframe 脊禅袜src="' + url + '?id=' + v + '" style="position:absoluteleft:-1000pxtop:-1000px"></iframe>')

    })

})

使用隐袭埋藏的iframe去做下载，隐藏iframe最好使用绝对定位将它移出可视区域的方法，而不是简单的display:none，因为在某些浏览器下，display:none的iframe不会执行。

---