Plusieurs conseils pour utiliser les tableaux de données layui-Tutoriel Layui-php.cn

Plusieurs conseils pour utiliser les tableaux de données layui

尚

Libérer： 2019-11-23 14:38:22

avant

5791 Les gens l'ont consulté

L'utilisation de composants de table peut améliorer considérablement l'efficacité du développement. Actuellement, les composants de table de données courants incluent la table bootstrap, la table layui, la table easyUI, etc. Ce didacticiel recommande d'utiliser le framework layui pour configurer les tables de données.

Plusieurs conseils pour utiliser les tableaux de données layui

Recommandé : Démarrage rapide du framework Lauii
Trois méthodes de rendu initiales

I Let's commencez par le formulaire d'initialisation le plus simple. Si je publie tout le code directement, vous pourriez avoir le vertige

Plusieurs conseils pour utiliser les tableaux de données layui

1, méthode de rendu :

<table class="layui-table" id="layui_table_id" lay-filter="dataTable"></table>

Copier après la connexion

var table = layui.table
            ,form = layui.form;
    layui.use(&#39;table&#39;, function () {  // 引入 table模块
        table.render({
            id:"dataTable",//
            elem: &#39;#layui_table_id&#39;,//指定表格元素
            url: &#39;/menu/menuList.ajax&#39;,  //请求路径
            cellMinWidth: 20 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,skin: &#39;line &#39; //表格风格 line （行边框风格）row （列边框风格）nob （无边框风格）
          　//,even: true    //隔行换色
            ,page: true  //开启分页
            ,limits: [10,20,50]  //每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。
            ,limit: 10 //每页默认显示的数量
            ,method:&#39;post&#39;  //提交方式
         　　,cols: [[
                {type:&#39;checkbox&#39;}, //开启多选框
                {
                    field: &#39;menuId&#39;, //json对应的key
                    title: &#39;ID&#39;,   //列名
                    sort: true   // 默认为 false,true为开启排序
                }
            ]]
        });
    });

Copier après la connexion

Format de données JSON renvoyé par java background

{
code: 0, 
count: 8,  //总行数
data: [,…], //表格数据
msg: ""
}

Copier après la connexion

2. Méthode de rendu automatique (Le code suivant est fourni par le responsable. La méthode de rendu automatique convient aux en-têtes de ligne complexes. Il est généralement recommandé d'utiliser la méthode ci-dessus pour le rendu)

<table class="layui-table" lay-data="{height:315, url:&#39;/demo/table/user/&#39;, page:true, id:&#39;test&#39;}" lay-filter="test">
  <thead>
    <tr>
      <th lay-data="{field:&#39;id&#39;, width:80, sort: true}">ID</th>
      <th lay-data="{field:&#39;username&#39;, width:80}">用户名</th>
      <th lay-data="{field:&#39;sex&#39;, width:80, sort: true}">性别</th>
      <th lay-data="{field:&#39;city&#39;}">城市</th>
      <th lay-data="{field:&#39;sign&#39;}">签名</th>
      <th lay-data="{field:&#39;experience&#39;, sort: true}">积分</th>
      <th lay-data="{field:&#39;score&#39;, sort: true}">评分</th>
      <th lay-data="{field:&#39;classify&#39;}">职业</th>
      <th lay-data="{field:&#39;wealth&#39;, sort: true}">财富</th>
    </tr>
  </thead>
</table>

Copier après la connexion

Deux, comment ajouter un bouton d'édition

var table = layui.table
            ,form = layui.form;
    layui.use(&#39;table&#39;, function () {  // 引入 table模块
        table.render({
            id:"dataTable",//
            elem: &#39;#layui_table_id&#39;,//指定表格元素
            url: &#39;/menu/menuList.ajax&#39;,  //请求路径
            cellMinWidth: 20 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,skin: &#39;line &#39; //表格风格 line （行边框风格）row （列边框风格）nob （无边框风格）
          　//,even: true    //隔行换色
            ,page: true  //开启分页
            ,limits: [10,20,50]  //每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。
            ,limit: 10 //每页默认显示的数量
            ,method:&#39;post&#39;  //提交方式
,done: function(res, curr, count) { //表格数据加载完后的事件
    //调用示例
    layer.photos({//点击图片弹出
        photos: &#39;.layer-photos-demo&#39;
        ,anim: 1 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
    });
    //如果是异步请求数据方式，res即为你接口返回的信息。
    //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
    console.log(res);

    //得到当前页码
    console.log(curr);

    //得到数据总量
    console.log(count);
}
  　　,cols: [[ {type:&#39;checkbox&#39;}, //开启多选框  { field: &#39;menuId&#39;, //json对应的key title: &#39;ID&#39;, //列名 sort: true // 默认为 false,true为开启排序  },{ fixed: &#39;right&#39;, title: &#39;操作&#39;, width: 215, align:&#39;center&#39;, toolbar: &#39;#barDemo&#39; //绑定按钮组 } ]] }); });
//监听工具条
table.on(&#39;tool(dataTable)&#39;, function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
    var data = obj.data //获得当前行数据
            ,layEvent = obj.event; //获得 lay-event 对应的值
    if(layEvent === &#39;detail&#39;){
　　　　 layui.alert(JSON.stringifr(data)) ; //将编辑的行信息转为json字符串
        layer.msg(data.attrId);
    } else if(layEvent === &#39;del&#39;){
        layer.msg(&#39;删除&#39;+data.menuId);
        console.log(table)
    } else if(layEvent === &#39;edit&#39;){
       
    });
    }
});

Copier après la connexion

rrree

Trois, comment ajouter un composant de formulaire au tableau ( J'en recommanderai 2 ci-dessous)

1, en utilisant le moteur de module (cette méthode est plus gênante, je recommande personnellement la seconde)

<script type="text/html" id="barDemo">  // id和toolbar 属性绑定
     <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>
</script>

Copier après la connexion

<!--  是否显示 -->
<script type="text/html" id="isShow">  // 请注意 id之间的关联
    {{#  if(d.menuDisplay === &#39;Y&#39;){ }}
    <input type="checkbox" name="menuDisplay" value="{{d.menuId}}" lay-skin="switch" lay-text="显示|隐藏" lay-filter="isShow" checked>
    {{#  } else { }}
    <input type="checkbox" name="menuDisplay" value="{{d.menuId}}" lay-skin="switch" lay-text="显示|隐藏" lay-filter="isShow" >
    {{#  } }}
</script>

Copier après la connexion

2, en utilisant la fonction méthode

{   //在表格对象cols属性中添加
    field: &#39;menuDisplay&#39;,  /
    title: &#39;是否显示&#39;,
    templet: &#39;#isShow&#39;, //模板关联以上定义的
    unresize: true,
    filter: "isShow",
    sort: false
}

Copier après la connexion

4. Afficher les images

{
    field: &#39;menuDisplay&#39;,
    title: &#39;是否显示&#39;,

    unresize: true,
    filter: "isShow",
    sort: false,
    templet: function (d) {
        if (d.menuDisplay == ‘Y’) {
            return` <input type = "checkbox"
            name = "menuDisplay"
            value = "`+d.menuId+`"
            lay - skin = "switch"
            lay - text = "显示|隐藏"
            lay - filter = "isShow" > `;
        } else {
            return` <input type = "checkbox"
            name = "menuDisplay"
            value = "`+d.menuId+`"
            lay - skin = "switch"
            lay - text = "显示|隐藏"
            lay - filter = "isShow"
            checked > `;
        }
    }
}

Copier après la connexion

Plusieurs conseils pour utiliser les tableaux de données layui Lier les attributs une fois les données de la table chargées