问题
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
回答1:
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);
}
}
来源:https://stackoverflow.com/questions/9323896/anyone-used-jquery-flexigrid-with-asp-net-mvc3