开发工具与关键技术: Visual Studio 2015 – Layui表格渲染
作者:廖亚星
撰写时间:2019年5 月15 日

下面我用Layui插件来渲染代码,首先我们要引用JS
Layui表格渲染

我们先在DIV中设置一个table,并设置好ID
Layui表格渲染
下面我们需要在script中编写代码
先设置两个全局变量,方便在后面接收
Layui表格渲染
下面图片中
参数elem类型是String/DOM,指定原始 table 容器的选择器或 DOM,是必填项,这里面我填的是table的ID
参数url中的值是控制器中定义方法的地址
参数cols类型是一个数组,设置表头,是必填项,其中title是表头的名字,type是传入数据的类型,field是传入数据的字段名,align是让每行内容居中,templet是自定义列模板,可以自己创建方法,后面填的是方法定义的名称
Layui表格渲染
下面是自定义方法,直接在表格中创建两个按钮
Layui表格渲染
还可以给表格一个分页查询默认是10条数据一页,也可以自定义设置多少条数据为一页,图中还有标记选中行和单击选中单选框的效果,这样当点击每行任意一处时,即可选中当前行
Layui表格渲染
同时在控制器中查询表格数据,让表格数据按设定方式排序,并且进行分页
Layui表格渲染
这样数据表格渲染就做好了
Layui表格渲染

相关文章:

  • 2021-12-31
  • 2022-01-07
  • 2022-01-14
  • 2021-06-10
  • 2021-04-16
猜你喜欢
  • 2021-03-26
  • 2021-05-15
  • 2021-05-20
  • 2021-12-02
相关资源
相似解决方案