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