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. ListBox item Sort

    将Rss内容读取到Listbox control中, 然后实现按照标题或发布日期进行排序. private void ListItemSort(string type) { if (type == & ...

  2. 7.2 TCP IP的11种状态

    先看TCP IP的10种状态,如下所示: 三次握手: 客户端A端发送SYN,然后进入SYN_SENT状态,服务器B端接收到SYN后,返回一个响应ACK,同时也发送一个SYN,然后B端进入SYN_RCV ...

  3. [HRBUST-1688]数论中的异或（思维题）

    数论中的异或 Time Limit: 1000 MS Memory Limit: 32768 K Total Submit: 75(41 users) Total Accepted: 35(30 us ...

  4. 蓝桥杯 BASIC-3：字母图形

      基础练习 字母图形   时间限制:1.0s   内存限制:256.0MB        问题描述 利用字母可以组成一些美丽的图形,下面给出了一个例子: ABCDEFG BABCDEF CBABCD ...

  5. 【HAOI2010】订货

    可以DP也可以是费用流,然而被我用非常简单的DP破了[开心] 原题: 某公司估计市场在第i个月对某产品的需求量为Ui,已知在第i月该产品的订货单价为di,上个月月底未销完的单位产品要付存贮费用m,假定 ...

  6. jquery的常用操作（操作html页面的Dom对象的元素）

    一:页面加载完成时,会执行jquery的方法(不需要等待图片加载完成,只要dom结构加载完成,就执行该方法) //第一种写法: $(document).ready(function() { // 执行 ...

  7. leetcode:Single Number【Python版】

    1.用双重循环逐个遍历(超时) 2.用list B的append和remove函数(超时) 3.用dict B(AC) class Solution: # @param A, a list of in ...

  8. 用复制mysql/data 文件夹 下面的数据库的形式来复制数据库出现的问题

    用复制mysql/data 文件夹 下面的数据库的形式来复制数据库出现的问题 提示找不到表,我去看了一下,丢失了很多个表: 问题: 直接拷贝data下的数据库数据进行备份 , 发现部分数据表不见了. ...

  9. CentOS7.4 删除virbr0 virbr0-nic虚拟网卡

    本文摘抄自  https://www.cnblogs.com/cloudos/p/8288041.html 在CentOS 7的安装过程中如果有选择相关虚拟化的的服务安装系统后,启动网卡时会发现有一个 ...

  10. 第一章 spring起步

    点击 网址 http://start.spring.io/ 就可以获得spring-boot的项目结构. 如下: 将项目解压到自己的项目中,然后找到mian函数所在启动类.运行.出现: 表示已经运行了 ...