Layui table 示例


Layui table 示例

 <link rel="stylesheet" href="lib/layui/css/layui.css" media="all">

 
    
<table id="demo" lay-filter="test"></table>
 
<script src="lib/layui/layui.js"></script>
<script>
    layui.use('table', function () {
        var table = layui.table;

        //第一个实例
        table.render({
            elem: '#demo'
          , height: 312
        //  , url: '/demo/table/user/' //数据接口
          ,  url: 'common/Getdatatwo.ashx' 
          , page: true //开启分页

            , edit: true

          , cols: [[ //表头
               { checkbox: true },
              //  { checkbox: true,type: 'checkbox', width: 100, title: '选择' },
            //  { type: 'checkbox', width: 100, title: '选择' },
           // { field: 'ID', title: 'ID', width: 80, sort: true, fixed: 'left' }
            , {  field: 'yuefen',   title:'月份', width: 80 }
            , { field: "state", title: "状态", width: 80, sort: true }
            , { field: "state2", title: "状态2", width: 80, event: 'setSign', style: 'cursor: pointer;' }
            , {  field: "empname",   title: "操作员" , width: 177 ,edit:true }
            , { field: "createdate", title: "时间", width: 180, sort: true }
           
              
             , { fixed: 'right', width: 250, align: 'center', toolbar: '#barDemo' } //这里的toolbar值是模板元素的选择器
           
          ]]

//*********************************
 , page: { theme: '#409eff', prev: '上一页', groups: 8, next: '下一页', layout: ['count', 'prev', 'page', 'next'] }
       
         

//********************************
        });

        //*******************************

        //监听行单击事件
        table.on('row(test)', function (obj) {
         //   console.log(obj.tr) //得到当前行元素对象
          //  console.log(obj.data) //得到当前行数据

           // alert(obj.data.yuefen);
          
            //obj.del(); //删除当前行
            //obj.update(fields) //修改当前行数据
        });

        //监听行双击事件
        table.on('rowDouble(test)', function (obj) {
            //obj 同上
        });
        //监听复选框选择
        table.on('checkbox(test)', function (obj) {
            alert(obj.checked);
            alert(obj.data.ID);
            console.log(obj.checked); //当前是否选中状态
          //  console.log(obj.data); //选中行的相关数据
            console.log(obj.type); //如果触发的是全选,则为:all,如果触发的是单选,则为:one
        });

        //编辑
        table.on('edit(test)', function (obj) { //注:edit是固定事件名,test是table原始容器的属性 lay-filter="对应的值"
            alert("1122" + obj.value);
            console.log(obj.value); //得到修改后的值
            console.log(obj.field); //当前编辑的字段名
            console.log(obj.data); //所在行的所有相关数据  
        });

        //监听单元格事件
        table.on('tool(test)', function (obj) {

          

            var data = obj.data;
            if (obj.event === 'setSign') {

                alert("eeeeeee:" );
                //同步更新表格和缓存对应的值
                obj.update({
                    state2: '7777777'
                });
                /*
                layer.prompt({
                    formType: 2
                  , title: '修改 ID 为 [' + data.id + '] 的用户签名'
                  , value: data.sign
                }, function (value, index) {
                    layer.close(index);

                    //这里一般是发送修改的Ajax请求

                    //同步更新表格和缓存对应的值
                    obj.update({
                        sign: value
                    });
                });
                
*/
            }
        });


        //监听工具条 
        /*
        table.on('tool(test)', function (obj) { //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象(如果有的话)

            if (layEvent === 'detail') { //查看
                //do somehing
            } else if (layEvent === 'del') { //删除
                layer.confirm('真的删除行么', function (index) {
                    obj.del(); //删除对应行(tr)的DOM结构,并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if (layEvent === 'edit') { //编辑
                //do something

                //同步更新缓存对应的值
                obj.update({
                    state2: '123'
                  , empname: 'xxx'
                });
            } else if (layEvent === 'LAYTABLE_TIPS') {
                layer.alert('Hi,头部工具栏扩展的右侧图标。');
            }
        });
        
*/

    });
</script>

    <script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  
  <!-- 这里同样支持 laytpl 语法,如: -->
  {{#  if(d.auth > 2){ }}
    <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
  {{#  } }}
</script>

posted on 2020-08-05 10:35 青蛙學堂 阅读(13) 评论(0)  编辑 收藏 引用 所属分类: JavaScriptc#

只有注册用户登录后才能发表评论。
<2020年8月>
2627282930311
2345678
9101112131415
16171819202122
23242526272829
303112345

导航

统计

常用链接

留言簿(7)

随笔分类

随笔档案

收藏夹

青蛙学堂

最新评论

阅读排行榜

评论排行榜

60天内阅读排行