Layui数据表格的实际项目使用

Layui的数据表格可谓是在后台管理的页面中经常用到的工具了

最近做项目就用到了，项目的要求是用数据表格显示出后台文章的列表并且每一行的文章都有对应的修改删除操作按钮

看完官网的介绍后就开始比着做了

这是前台的html的主要代码：

我们需要一个用来存放数据表格的div容器

 <body>

      <div id="page_info">    

      </div>

 </body>

这是js代码：

我们在这里介绍的是方法渲染数据表格

 $(function(){//页面加载完成

   loding_page();//执行加载渲染数据表格的函数

 });

 function loding_page(){//定义一个加载数据表格的方法

       layui.use('table', function(){

             var table = layui.table;

             table.render({
　　　　　　　　　id:'task'  //标识本次加载的数据表格

             ,elem: '#demo'//数据表格的容器

             ,height: 312//表格的高度单位px

             ,url: 'php/back.php' //提供数据的接口
               ,method:'post'

             ,page: true //开启分页

             ,cols: [[ //表头

                {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}

               ,{field: 'username', title: '用户名', width:80}

               ,{field: 'sex', title: '性别', width:80, sort: true}

               ,{field: 'city', title: '城市', width:80}

               ,{field: 'sign', title: '签名', width: 177}

               ,{field: 'experience', title: '积分', width: 80, sort: true}//sort:true意思是开启排序

               ,{field: 'score', title: '评分', width: 80, sort: true}

               ,{field: 'classify', title: '职业', width: 80}

               ,{field: 'wealth', title: '财富', width: 135, sort: true}

                //这里我们可以加一点自己定义的事件

                //d代表这一行数据，如果我们想操作这一行数据就要知道这一行数据的id

                //就是  d.id 点后面直接跟字段名就能获取到

               ,{field: 'do', title: '操作', width: 135, templet:function(d){

                return'<button onClick="del(this)" > d.id</button>'

                //这里的这个按钮的名称就是标识这一行数据的id

                //并且还有个删除本行的事件先获取行号（id）再根据id删除该行内容

                //还要注意的是，这里的field的名称要和后台返回的json数据对应，否则

                //数据是不会显示出来的

                }}

             ]]
　　　　　　　　,where:{//接口的其它参数 
　　　　　　　　　　act : 'getList'
　　　　　　　　}
　　　　　　　　,request:{//用于对分页请求的参数　//如果无需自定义请求参数，可不加该参数

　　　　　　　　　　　　pageName: 'curr' //页码的参数名称，默认：page(第几页)

　　　　　　　　　　　　,limitName: 'nums' //每页数据量的参数名，默认：limit（每一页的数据量）

　　　　　　　　}
　　　　　　　　,response:{//自定义的回应参数
　　　　　　　　　　countName : 'allcount',//所有的数据条数
　　　　　　　　　　dataName : 'data'//返回的数据
　　　　　　　　}
　　　　　　　　,text:{//如果没有数据的提示信息
　　　　　　　　　　none :'暂无相关数据'
　　　　　　　　};
　　　　　　　　　　/*添加表头的监听排序事件---从服务端重新获取数据排序，而不是仅仅是当前页面的数据排序*/
　　　　　　　　table.on('sort(task)',function(obj){//这里的sort(task)//task名要和前面定义的数据表格标识一致
　　　　　　　　　　　　　//重新加载表格
　　　　　　　　　　　　　table.reload('task',{
　　　　　　　　　　　　　　　　initSort:obj,//记录初始排序，如果不设的话，将无法标记表头的排序状态。　　　　　　　　　　　　　　　　

　　　　　　　　　　　　　　　　　　where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）

　　　　　　　　　　　　　　　　　　　　　　field: obj.field //排序字段

　　　　　　　　　　　　　　　　　　　　　　,order: obj.type //排序方式

　　　　　　　　　　　　　　　　　　}

　　　　　　　　　　　　　})　
　　　　　　　　});

         });

      });

 }

//我么也可以把过于臃肿的配置参数在外面先定义好（比如上面的数据表格的字段），用的时候直接调用变量名即可

//后台方面的数据处理就不做详解了，按照官方的格式来就可以

整体做下来我认为最需要注意的就是

1.后台数据格式的处理

2.行事件的添加

　　这也是最基本的，官方给我们讲的是返回的数据格式必须是特定的json形式的，

　　

LayUI——数据表格使用的更多相关文章

  1. 【Layui】当Layui数据表格和Layui下拉框组合时发生的问题

    关于Layui数据表格用下拉框显示问题 如图所示 可以看见当点击下拉框时下拉选项被下拉框覆盖 此时你需要在数据表格渲染完成时的回调内添加如下代码即可 $(".sel_scrq"). ...

  2. Layui数据表格模型

    视图模型 package com.meiyou.model; import org.springframework.context.annotation.Bean; import java.io.Se ...

  3. Layui数据表格的接口数据请求方式为Get

    Layui数据表格的接口数据请求方式为Get

  4. layui 数据表格自带的导出Excel,身份证等E+/000问题解决

    layui数据表格的工具栏自带导出Excel 会将身份证等 长整数的 自动变成E+并且 后面有000.从而导致数据不能完整导出. 解决方案: 1.先下载Excel的插件包.将压缩包内的两个js放到 l ...

  5. 使用webapi绑定layui数据表格完整增删查改记录

    因为每次给layui数据表格绑定数据或者类似操作的时候  总要重新做一遍 而且忘记很多东西 所以干脆写博客把相关东西记录下来 便于查阅和修正 以下是一个完整的数据表格i项目的增删改查案例 先来看后台 ...

  6. 解决：layUI数据表格+简单查询

    解决:layUI数据表格+简单查询 最近在用layui写项目,在做到用户查询时,发现在layui框架里只有数据表格,不能增加查询.于是自己摸索了一下,写个笔记记录一下. 我想要的效果: 1.定义查询栏 ...

  7. layui数据表格搜索

    简单介绍 我是通过Servlet传递json给layui数据表格模块,实现遍历操作的,不过数据量大的话还是需要搜索功能的.这是我参考网上大佬代码写出的搜索功能. 实现原理 要实现搜索功能,肯定需要链接 ...

  8. layui 数据表格+分页+搜索+checkbox+缓存选中项数据

    在做数据表格的时候遇到了很多坑, 今天整理一下方便以后使用. 主要功能是使用数据表格, 做分页,做搜索,  还有checkbox,  支持全选. 当选中一些数据的时候, 数据切换页面数据在切换回来后, ...

  9. layui数据表格使用（一：基础篇，数据展示、分页组件、表格内嵌表单和图片）

    表格展示神器之一:layui表格 前言:在写后台管理系统中使用最多的就是表格数据展示了,使用表格组件能提高大量的开发效率,目前主流的数据表格组件有bootstrap table.layui table ...

随机推荐

  1. Object-C 基础笔记4---ARC内存管理

    内存管理的原则 1,对你自己拥有的对象负责.你只能释放自己拥有的对象.(谁污染谁治理). 2,凡是通过retain,alloc,copy等于段获得了所有权对象,都必须在你不再使用的时候释放.调用rel ...

  2. php变量什么情况下加大括号{}

    下面几个比较能说明原因的解释是: 表示{}里面的是一个变量  ,执行时按照变量来处理 在字符串中引用变量使用的特殊包括方式,这样就可以不使用.运算符,从而减少代码的输入量了. 其实输出那块是等同于pr ...

  3. [Algorithm] How to find all the subsets of an n-element set T?

    There are two direction for us to solve this problem. (1) Recursion Recursive step: T[0] conbines wi ...

  4. nmap扫描时的2个小经验

    http://pnig0s1992.blog.51cto.com/393390/367558/ 1.我肉鸡的环境是Windows XP sp3,在使用nmap扫描外网的时候,提示我 pcap_open ...

  5. Arpa’s obvious problem and Mehrdad’s terrible solution 思维

    There are some beautiful girls in Arpa’s land as mentioned before. Once Arpa came up with an obvious ...

  6. 字符串的比较【string和字符数组】

    无论是string 还是 字符数组的字符串比较函数,返回的都是字典序的大小.如 1234 和 5 比较时就是1234的字典序小于5,要想比较字符串表示的数字的大小,需要自己写函数比较

  7. 转-Hive/Phoenix + Druid + JdbcTemplate 在 Spring Boot 下的整合

    Hive/Phoenix + Druid + JdbcTemplate 在 Spring Boot 下的整合 http://blog.csdn.net/balabalayi/article/detai ...

  8. STS或eclipse安装SVN插件（转）

    安装sts--SVN插件 简介:sts是与eclipse类似的Java IDE开发工具(不了解的百度) 1.sts菜单栏 help->install New Software 依据大家的版本选择 ...

  9. 转 AngularJS 2.0将面向移动应用并放弃旧浏览器

    AngularJS团队表示“AngularJS 2.0是移动应用的框架”.该框架将继续支持桌面,但其主要关注点变成了移动领域.它的目标还包括通过转译器支持EcmaScript 6(因为浏览器还不支持E ...

  10. html 滚动固定显示js脚本

    <script type="text/javascript">function htmlScroll(){ var top = document.body.scroll ...