有人将ASP.NET MVC3与jquery flexigrid一起使用吗? [英] Anyone used jquery flexigrid with ASP.NET MVC3?
本文介绍了有人将ASP.NET MVC3与jquery flexigrid一起使用吗?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图将flexigrid与asp.net MVC3一起使用. 我看不到任何在线示例. 有人做过吗? 如果是，可以在这里粘贴一些代码片段吗?
谢谢
解决方案
flexgrid是与服务器端无关的客户端控件. Wiki包含一个示例，其中包含您可以使用的不同属性的描述. /p>
因此您可以设置视图:
<script src="@Url.Content("~/Scripts/flexigrid.js")" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#flex1").flexigrid({
url: '@Url.Action("staff")',
dataType: 'json',
colModel: [
{ display: 'ID', name: 'id', width: 40, sortable: true, align: 'left' },
{ display: 'First Name', name: 'first_name', width: 150, sortable: true, align: 'left' },
{ display: 'Surname', name: 'surname', width: 150, sortable: true, align: 'left' },
{ display: 'Position', name: 'email', width: 250, sortable: true, align: 'left' }
],
searchitems: [
{ display: 'First Name', name: 'first_name' },
{ display: 'Surname', name: 'surname', isdefault: true },
{ display: 'Position', name: 'position' }
],
sortname: "id",
sortorder: "asc",
usepager: true,
title: "Staff",
useRp: true,
rp: 10,
showTableToggleBtn: false,
resizable: false,
width: 700,
height: 370,
singleSelect: true
});
});
</script>
<table id="flex1"></table>
和一个控制器，该控制器将返回flexgrid期望的JSON结构:
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult Staff()
{
// TODO: obviously the data usually comes from a database
// so you could define a view model that will be populated
// but which must contain the following structure:
var data = new
{
page = 1,
total = 3,
rows = new[]
{
new
{
id = 1,
cell = new
{
id = 1,
first_name = "first name",
surname = "surname",
email = "f@f.com",
position = "pos 1"
}
},
new
{
id = 2,
cell = new
{
id = 2,
first_name = "first name 2",
surname = "surname 2",
email = "f2@f.com",
position = "pos 2"
}
},
new
{
id = 3,
cell = new
{
id = 3,
first_name = "first name 3",
surname = "surname 3",
email = "f3@f.com",
position = "pos 3"
}
},
}
};
return Json(data, JsonRequestBehavior.AllowGet);
}
}
I am trying to use flexigrid with asp.net MVC3. I can't see any online examples for this. Has anyone done that? If yes, can you paste little code snippet here please?
thanks
解决方案
The flexgrid is a client side control that is server side agnostic. The Wiki contains an example with description of the different properties that you could use.
So you could setup a view:
<script src="@Url.Content("~/Scripts/flexigrid.js")" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#flex1").flexigrid({
url: '@Url.Action("staff")',
dataType: 'json',
colModel: [
{ display: 'ID', name: 'id', width: 40, sortable: true, align: 'left' },
{ display: 'First Name', name: 'first_name', width: 150, sortable: true, align: 'left' },
{ display: 'Surname', name: 'surname', width: 150, sortable: true, align: 'left' },
{ display: 'Position', name: 'email', width: 250, sortable: true, align: 'left' }
],
searchitems: [
{ display: 'First Name', name: 'first_name' },
{ display: 'Surname', name: 'surname', isdefault: true },
{ display: 'Position', name: 'position' }
],
sortname: "id",
sortorder: "asc",
usepager: true,
title: "Staff",
useRp: true,
rp: 10,
showTableToggleBtn: false,
resizable: false,
width: 700,
height: 370,
singleSelect: true
});
});
</script>
<table id="flex1"></table>
and a controller that will return the JSON structure that flexgrid expects:
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult Staff()
{
// TODO: obviously the data usually comes from a database
// so you could define a view model that will be populated
// but which must contain the following structure:
var data = new
{
page = 1,
total = 3,
rows = new[]
{
new
{
id = 1,
cell = new
{
id = 1,
first_name = "first name",
surname = "surname",
email = "f@f.com",
position = "pos 1"
}
},
new
{
id = 2,
cell = new
{
id = 2,
first_name = "first name 2",
surname = "surname 2",
email = "f2@f.com",
position = "pos 2"
}
},
new
{
id = 3,
cell = new
{
id = 3,
first_name = "first name 3",
surname = "surname 3",
email = "f3@f.com",
position = "pos 3"
}
},
}
};
return Json(data, JsonRequestBehavior.AllowGet);
}
}
这篇关于有人将ASP.NET MVC3与jquery flexigrid一起使用吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
