如何绑定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>

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

一般你要用C#做报表的话，我觉得微软的ReportViewer控件会比较容易上手和掌握。就我个人的经验我简单的提一些基本的使用方法吧，说的不好还请见谅。步骤：1.添加Web应用程序或WinForm应用程序，并在根目录下添加一个报表(文件扩展名为.rdlc)和一个数据集文件(扩展名为)，向(Web或WinForm)窗体拖入一个ReportViewer控件2.把要显示的数据配置到数据集中(这个查下msdn中的使用方法就知道了)；3.设计之前添加的报表，打开该报表的视图设计器，拖一个表格进来(表格默认显示三行)。然后在IDE中选择数据，选择刚刚配置好的数据源，把要显示的字段一个一个的拖进表格中的第二行，保存并关闭。4.选择窗体中的ReportViewer，选择刚刚设计好的报表，保存并编译，运行看看效果。

---