不知火舞大战外星人,侠影记,蒋艳萍年轻时照片
今天试用了一些jquery的插件jqgrid，此插件能非常快捷的帮助我们建立一个crud功能的表单，并且具有分页，排序等一些基本功能，非常好用。
这里是jqgrid的下载地址：
demo示例：
下面看下实施步骤：
首先下载好jqgrid的类库之后，在layout.cshtml中引用他，那么之后我们就不需要在每一个view中都去引用相同的类库了。这里我引用了这几个文件来帮助我们开发:
[html]
<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示例中你可以找多更多的属性和事件。
[javascript]
<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>
这里我们简单介绍以下，url指的是数据源对应的action，也就是说jqgrid将从这个action中获取数据，并且指定需要json数据。colname和colmode是你需要显示的列名及数据的表现类型。sortname为排序字段，rowlist为分页显示的每页的个数选择，另外我们这里没有使用它自带的增删改查功能，如果你需要使用它们，将代码中的del:false, add: false, edit:false, search: false 设置为true即可。
另外下面的navbuttonadd是我们添加的两个自定义按钮，分别实现了自定义的查看item和search功能。你也可以添加更多按钮实现自己想要的功能。
下面可以看看在后台的action代码如何返回我们需要的数据（可以通过你需要的方式来得到例如linq to sql，entity framework等等，这里我们使用linq作为示例），首先我们需要看看绑定jqgrid数据的这个action需要接收什么样的参数：
[csharp]
public actionresult usermaintenance(string sidx, string sord, int page, int rows)
sidx为排序字段名（这里为id），sord为排序方式（asc，desc），page为页数，rows为每页大小（page_size）
了解参数的意义之后我们可以根据他们来编写代码，以返回合适的数据。
[csharp]
strdatacontext context = new strdatacontext();
int pageindex = convert.toint32(page) - 1;
int pagesize = rows;
int? totalrecord = context. customer.count();
int totalpages = (int)math.ceiling((float)totalrecord / (float)pagesize);
var union = from c in context.customer
join p in context.group
on c.groupid equals p.groupid
select new
{
c.name,
c.id,
c.active,
p.groupname,
};
var results = from entity in union.orderby(sidx + " " + sord).skip(pageindex * pagesize).take(pagesize)
select entity;
var jsondata = new
{
total = totalpages,
page = page,
records = totalrecord,
rows = (from item in results
select new
{
id = item.id.tostring(),
cell = new string[] {
item.name.tostring(),
item.id.tostring(),
item.active.tostring(),
item.groupname.tostring(),
}
}).toarray()
};
return json(jsondata, jsonrequestbehavior.allowget);
这里context是linq to sql生成的context，另一个值得注意的地方是orderby（）方法，由于默认的linq orderby方法里面不接受string类型的参数，你可以写lamba表达式来做到这一点，例如 orderby(x => x.id), 但是这样就不能根据输入参数来动态生成linq表达式了，由于不同的排序字段名你需要写多条linq表达式，而这里我们可以以这种方式写的的原因是通过dynamic linq来做到的，大家可以看看这里的资源：
.net/scottgu/archive/2008/01/07/dynamic-linq-part-1-using-the-linq-dynamic-query-library.aspx">http://weblogs.asp.net/scottgu/archive/2008/01/07/dynamic-linq-part-1-using-the-linq-dynamic-query-library.aspx
推荐大家使用，很方便。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
Blazor server side 自家的一些开源的, 实用型项目的进度之 CEF客户端
.NET IoC模式依赖反转(DIP)、控制反转(Ioc)、依赖注入(DI)
vue+.netcore可支持业务代码扩展的开发框架 VOL.Vue 2.0版本发布
我要评论
网友评论