记一次成功接触layui框架真的非常方便

admin 2020-06-29 07:03:33 363浏览 0评论

这个东西回了后感觉非常简单的,当然这是废话了,什么东西会了肯定都简单了哈哈,当然我在看官方文档的时候也遇到过很多问题,文档有时也不是我们能看就能看懂的,比如这一段


<script type="text/html" id="titleTpl">


{{#  if(d.id < 100){ }}


符合条件的内容,其次这里的d.id 就是接口列表的id字段,看着简单实操还是有点难度


{{#  } else { }}


{{d.title}}(普通用户)


{{#  } }}


</script>


上面这段官方代码也给了,但是绑定又在另外一个地方说明templet: '#titleTpl' 这样才算绑定了,确实找了很久,总之还是要多用才会,文档和教程只写了最基础的东西,然后你想加QQ群去问吧,得到的结果很慢,估计很动人人家都不用那么复杂的逻辑.总之我是还有好多不懂得,因为毕竟如果要很完美的操作,还是要有JS基础滴

还有一点说明下,其实他是内置jquery的,自己去导就可以了


我这里大概说下表格吧


先插入一个试图,然后即可获取数据,当然还有点击事件,以及toolbar 和行事件tool等等等等废话不多说,发一个我写的demo吧

微信图片_20200629072504.png


<style type="text/css">

.LAY-component-layer-list{display:none!important;}

#LAY-component-layer-list{display:none!important;}

.layadmin-tabspage-none .layui-layout-admin .layui-body{top: 0px;}

mip-fixed{

    display:none!important;

}

.mip-fixedlayer div[mip-semi-fixed-fixedStatus], mip-semi-fixed div[mip-semi-fixed-fixedStatus]{

    position:initial!important;

}

</style>

<table class="layui-hide" id="container" lay-filter="container"></table>


<script type="text/html" id="toolbarDemo">

  <div class="layui-btn-container">

<!--     <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>

    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button> -->

  {{#  if(d.status < 5){ }}

    <button class="layui-btn layui-btn-sm" lay-event="isAll">停止URL新增</button>

    {{#  } }}

  </div>

</script>


<script type="text/html" id="table-site-list">

  {{#  if(d.accounts == 0){ }}

  <a class="layui-btn layui-btn-xs  va1" lay-event="check">验收</a>

  {{#  } }}

  {{#  if(d.accounts == 1){ }}

  <a class="layui-btn layui-btn-xs  fw1" lay-event="accounts">结算</a>

  {{#  } }}

</script>


<script>

    var childIndex;

 console.log(childIndex);

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

        var table = layui.table;

        table.render({

            elem: '#container'

            ,url: layui.setter.baseUrl + "home/seoservice/get_orderinfo"

            ,toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板

            ,page:true

            , where: {

            token: layui.data('seo')[layui.setter.request.tokenName],

            seoid: childIndex

            }

            ,cols: [[

                // {type:'checkbox'}

                {field:'id', title: 'ID', width:70}

                ,{field:'ssyq', title: '搜索引擎', width:80}

                ,{field:'url', title: '网址'}

                , {

          title: "操作",

          width: 150,

          align: "center",

          // fixed: "right",

          templet: "#table-site-list"

        }

            ]]

        });

 


   //头工具栏事件

  table.on('toolbar(container)', function(obj){

    var checkStatus = table.checkStatus(obj.config.id);

    switch(obj.event){

      case 'getCheckData':

        var data = checkStatus.data;

        layer.alert(JSON.stringify(data));

      break;

      case 'getCheckLength':

        var data = checkStatus.data;

        layer.msg('选中了:'+ data.length + ' 个');

      break;

      case 'isAll':

        //layer.msg(checkStatus.isAll ? '停止URL新增': '停止URL新增');

        var data = checkStatus.data;


        //layer.alert(JSON.stringify(obj));

        //console.log(childIndex);

       //执行 Ajax 后重载

       request.req({

       url: layui.setter.baseUrl + "home/seoservice/isstop",

       data: { 'id': childIndex,token: layui.data('seo')[layui.setter.request.tokenName] },

       async: false,

       type: "post",

       success: function (res) {

          layer.msg(res.msg); 

         }

       })

      break;

      

      //自定义头工具栏右侧图标 - 提示

      case 'LAYTABLE_TIPS':

        layer.alert('这是工具栏右侧自定义的一个图标按钮');

      break;

    };

  });




//监听行工具事件

  table.on('tool(container)', function(obj){

    var data = obj.data;

    //console.log(obj)

    if(obj.event === 'accounts'){

      layer.confirm('确定结算么', function(index){

        console.log(data.id);

     //执行 Ajax 后重载

     request.req({

     url: layui.setter.baseUrl + "home/seoservice/accounts",

     data: { 'data': data,token: layui.data('seo')[layui.setter.request.tokenName] },

     async: false,

     type: "post",

     success: function (res) {

        layer.msg(res.msg); 

       }

     })

        obj.del();

        layer.close(index);

      });

    } else if(obj.event === 'check'){

      layer.confirm('确定验收么', function(index){

        console.log(data.id);

             //执行 Ajax 后重载

       request.req({

       url: layui.setter.baseUrl + "home/seoservice/check",

       data: { 'data': data,token: layui.data('seo')[layui.setter.request.tokenName] },

       async: false,

       type: "post",

       success: function (res) {

          layer.msg(res.msg); 

         }

       })

        obj.del();

        layer.close(index);

      });

    }

  });




    //获取用户数据

    request.req({

    url: layui.setter.baseUrl + "home/index/getuser",

    data: { token: layui.data('seo')[layui.setter.request.tokenName] },

    async: false,

    type: "post",

    success: function (res) {

     var res=eval(res);

    if(res.data.data.level == 1){

      se(".fw1").attr("style","display:none;");

    }else{

      se(".va1").attr("style","display:none;");

    }


        }

    });



});


</script>


0条评论