Comment créer un tableau dans Layui

Le module table est un autre travail réfléchi de layui. Il est récemment lancé dans la version layui 2.0 et est l'un des composants principaux de layui. Il est utilisé pour exécuter une série de fonctions et d'opérations de données dynamiques sur des tables, couvrant presque tous les besoins impliqués dans les activités quotidiennes. Recommandé : Tutoriel d'utilisation de Laui

Prend en charge l'en-tête fixe, la ligne fixe, la colonne fixe de gauche/colonne de droite, prend en charge le glisser-déposer pour modifier la largeur de colonne, prend en charge le tri, prend en charge les en-têtes à plusieurs niveaux et prend en charge les unités. Modèles personnalisés pour les grilles, prenant en charge la surcharge des tableaux (telle que la recherche, le filtrage conditionnel, etc.), la prise en charge des cases à cocher, la pagination, l'édition de cellules et d'autres fonctions.

HTML :

<div class="row" id="divParams">
        <div class="panel col-md-12">
            <br />
            <div class="demoTable">
                关键字：
                <div class="layui-inline">
                    <input name="id" class="layui-input" id="keyword" placeholder="请输入查询关键字">
                </div>
                时间段：
                <div class="layui-inline">
                    <input class="layui-input" id="timearea" placeholder="请选择查询时间段" type="text">
                </div>
                <button class="layui-btn" data-type="reload" οnclick="initTable();">搜索</button>
            </div>
            <table class="layui-table" id="demo" lay-filter="demo"></table>
        </div>
    </div>
    <script id="dateTpl" type="text/html">
        {{#  var fn = function(){
        return moment(d.ApplyDate).format("YYYY-MM-DD");
         }; if(true){ }}
        {{ fn() }}
        {{#  } }}
 
    </script>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-mini" lay-event="detail"> 查看</a>
        <a class="layui-btn layui-btn-mini" lay-event="edit"> 编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del"> 删除</a>
    </script>

JavaScript :

<script>
        $(document).ready(function () {
 
            initTable();
        });
        layui.use(&#39;laydate&#39;, function () {
            var laydate = layui.laydate;
            //时间选择器
            laydate.render({
                elem: &#39;#timearea&#39;
                , range: true
            });
 
        });
        function initTable() {
            var timeArea = $("#timearea").val();
            var startTime = "";
            var endTime = "";
            if (timeArea) {
                startTime = timeArea.split(" - ")[0];//开始时间
                endTime = timeArea.split(" - ")[1];//结束时间
            }
            layui.use(&#39;table&#39;, function () {
                var table = layui.table;
                //执行渲染
                table.render({
                    id: &#39;demo&#39;,
                    elem: &#39;#demo&#39; //指定原始表格元素选择器（推荐id选择器）
                    , height: 315 //容器高度
                    , cols: [[{ checkbox: true }
                        , { field: &#39;DepartmentName&#39;, title: &#39;单位名称&#39;, width: 180, sort: true }
                        , { field: &#39;ISName&#39;, title: &#39;信息系统名称&#39;, width: 200, sort: true }
                        , { field: &#39;CloudType&#39;, title: &#39;上云类别&#39;, width: 130, sort: true }
                        , { field: &#39;ContactPerson&#39;, title: &#39;联络人&#39;, width: 130, sort: true }
                        , { field: &#39;ContactPhoneNumber&#39;, title: &#39;联络人手机&#39;, width: 130 }
                        , { field: &#39;ApplyDate&#39;, title: &#39;申请日期&#39;, width: 150, sort: true, templet: &#39;#dateTpl&#39; }
                        , { field: &#39;CloudState&#39;, title: &#39;操作&#39;, width: 160, fixed: &#39;right&#39;, toolbar: &#39;#barDemo&#39; }
                    ]],
                    url: &#39;/Order/GetTableData/&#39;,
                    where: { KeyWords: $("#keyword").val(), StartTime: startTime, EndTime: endTime },
                    method: &#39;post&#39;,
                    limits: [10, 20, 30, 50, 100]
                    , limit: 10, //默认采用10
                    loading: true,
                    page: true
 
                });
                //监听工具条
                table.on(&#39;tool(demo)&#39;, function (obj) {
                    var data = obj.data;
                    if (obj.event === &#39;detail&#39;) {
                        layer.msg(&#39;ID：&#39; + data.applyid + &#39; 的查看操作&#39;);
                    } else if (obj.event === &#39;del&#39;) {
                        layer.confirm(&#39;真的删除行么&#39;, function (index) {
                            obj.del();
                            layer.close(index);
                        });
                    } else if (obj.event === &#39;edit&#39;) {
                        layer.alert(&#39;编辑行：<br>&#39; + JSON.stringify(data))
                    }
                });
 
            });
        } 
 
    </script>

Regardons d'abord les paramètres requis pour les données de requête asynchrone décrites dans l'API :

Par défaut, la page et la limite sont transmises. Les noms des paramètres peuvent être modifiés selon les besoins. Les deux paramètres sont respectivement notre numéro de page traditionnel et notre taille de page.

où se trouvent d'autres paramètres supplémentaires. Vous pouvez choisir de transmettre ou non la valeur en fonction des besoins de la première page.

Ici, j'ai modifié la valeur par défaut (dans le fichier table.js) et changé la page d'origine et la limite en Début et Longueur :

Ce qui suit est la logique d'action d'arrière-plan :

public ActionResult GetTableData(string Start, string Length, string KeyWords, string StartTime,string EndTime)
        {
            if (string.IsNullOrWhiteSpace(Start) || string.IsNullOrWhiteSpace(Length))
            {
                return Json(new { Success = false, Message = "" }, JsonRequestBehavior.AllowGet);
            }
            var demoList = orderdal.getDemoData(Start, Length, KeyWords, StartTime, EndTime);
            return Json(demoList, JsonRequestBehavior.AllowGet);
        }

Ici, nous ajoutons trois paramètres en plus des deux paramètres par défaut, qui correspondent au champ de recherche au premier plan. La période de temps est assez particulière. Il s'agit de la zone de temps fournie avec layui, comme indiqué ci-dessous :

Lors de l'impression dans le frontend, nous pouvons voir le format suivant :

Il doit donc être converti pour faciliter le filtrage en arrière-plan :

Collez ensuite le code pour le format des données de retour :

  public LayTableResult<V_MoveUnionDeployCloudBase> getDemoData(string Start, string Length, string KeyWords, string StartTime, string EndTime)
        {
            ....==.
            LayTableResult<V_MoveUnionDeployCloudBase> result = new LayTableResult<V_MoveUnionDeployCloudBase>()
            {
                code = seleResult.Any() ? 0 : 1,
                count = resultCount,//总条数
                data = seleResult,
                msg = ""
            };
 
            return result;
        }

Le LayTableResult ici est une classe définie par vous-même en fonction des besoins de la page, comme suit (T est le tableau que vous souhaitez retourner) :

 public class LayTableResult<T>
    {
        public int code { get; set; }
        public string msg { get; set; }
        public int count { get; set; }
        public List<T> data { get; set; }
 
    }

À ce stade, toute la logique a été écrite. Une chose qui doit être soulignée est que lorsque vous. effectuez un filtrage conditionnel, vous devez ajouter un attribut au bouton de recherche, comme suit :

Ensuite, la colonne d'action est liée au HTML en externe :

Si vous devez personnaliser la colonne, utilisez le framework LayUI. La syntaxe du modèle intégré, l'image suivante est une conversion du format horaire de la colonne de date d'application :

Rendu :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!