EasyMvc入门教程-高级控件说明（20）表格控件

表单与表格是信息化系统里很常见的控件，EasyMvc提供了简单的数据绑定方式（基于Json），看下面的示例：

准备的接口地址代码如下：（该接口适用以下所有例子）

public IActionResult TableData(int page, int limit, string field = "", string sort = "")
{
for (var i = 0; i < 1000; i++)
{
var item = new Person
{
UserName = "mxd" + i,
Birthday = DateTime.Now.AddDays(i),
Comment = "我们是备注..."
};
datas.Add(item);
}

var result = LinqHelper.SortingAndPaging(datas.AsQueryable(), field, sort, page, limit);
return Json(new { code = 0, msg = "", count = datas.Count, data = result });
}

1、简单的View使用方法如下：

@(Html.Q().DataGrid().AjaxRead("/DataGrid/TableData").Columns<Person>())

显示效果如下：



2、如果我们需要显示某几个字段，可以采取如下方式：

@(Html.Q().DataGrid().AjaxRead("/DataGrid/TableData").Columns<Person>(
cols =>
{
cols.Bound(n => n.UserName);
cols.Bound(m => m.Birthday);
cols.Bound(n => n.Comment);
}
))

效果如下：



3、列可以定义模板，如下所示：

@(Html.Q().DataGrid().AjaxRead("/DataGrid/TableData").Columns<Person>(
cols =>
{
cols.Bound(n => n.UserName).TempletId("tp");
cols.Bound(m => m.Birthday);
cols.Bound(n => n.Comment);
}
))

@Html.Q().StartTemplate(new TemplateModel() { Id = "tp" })

@Html.Q().Button().ClickClientEvent("demo").Text("{{d.userName}}").SizeXSmall()
<script>function demo(data) { layer.msg("{{d.userName}}"); }</script>

@Html.Q().EndTemplate()

效果如下所示：



4、表格还可以实现列排序，行点击，列选中等操作，请参照在线演示的示例代码，最后参考下表格的样式美化（会涉及一些CSS，没关系，需要的时候COPY参考修改就可以）

效果如下:



总结：表格应该是目前最复杂的控件，掌握了表格，基本就掌握了EasyMvc，请根据实际情况参考示例实现。

更多使用示例请浏览在线示例：http://core.zwc.cn