So erstellen Sie eine Tabelle in Laui

Das Tabellenmodul ist ein weiteres durchdachtes Werk von Laui. Es wurde in der Laui 2.0-Version neu eingeführt und ist eine der Kernkomponenten von Laui. Es wird zur Ausführung einer Reihe von Funktionen und dynamischen Datenoperationen an Tabellen verwendet und deckt nahezu alle Anforderungen im Tagesgeschäft ab. Empfohlen: Tutorial zur Verwendung von Layui

Unterstützt feste Kopfzeile, feste Zeile, feste Spalte links/Spalte rechts, unterstützt Ziehen, um die Spaltenbreite zu ändern, unterstützt Sortierung, unterstützt mehrstufige Überschriften und unterstützt Einheiten Benutzerdefinierte Vorlagen für Raster, die das Überladen von Tabellen unterstützen (z. B. Suche, bedingte Filterung usw.), Unterstützung für Kontrollkästchen, Paging, Zellenbearbeitung und andere Funktionen.

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>

Sehen wir uns zunächst die Parameter an, die für asynchrone Anforderungsdaten erforderlich sind, die in der API beschrieben sind:

Standardmäßig werden Seite und Limit übergeben. Die Parameternamen können nach Bedarf geändert werden. Die beiden Parameter sind unsere traditionelle Seitenzahl bzw. Seitengröße.

Wo sind weitere zusätzliche Parameter? Sie können wählen, ob der Wert entsprechend den Anforderungen der Titelseite übergeben werden soll.

Hier habe ich den Standardwert (in der Datei table.js) geändert und die Originalseite und das Limit auf Start und Länge geändert:

Das Folgende ist die Hintergrund-Aktionslogik:

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);
        }

Hier fügen wir zusätzlich zu den beiden Standardparametern drei Parameter hinzu, die dem Vordergrundsuchfeld entsprechen. Es ist das Zeitfeld, das mit Laui geliefert wird, wie unten gezeigt:

Beim Ausdruck im Frontend können wir sehen, dass das Format so aussieht:

Es muss also zur Vereinfachung konvertiert werden Hintergrundfilterung:

Dann fügen Sie den Code für das Rückgabedatenformat ein:

  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;
        }

Das LayTableResult hier ist eine Klasse, die Sie entsprechend den Anforderungen der definiert haben Seite wie folgt (T ist die Tabelle, die Sie zurückgeben möchten):

 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; }
 
    }

An diesem Punkt wurde die gesamte Logik geschrieben. Eine Sache, die betont werden muss Wenn Sie eine bedingte Filterung durchführen, sollten Sie der Suchschaltfläche ein Attribut wie folgt hinzufügen:

Dann ist die Aktionsspalte extern an HTML gebunden:

Wenn Sie die Spalte anpassen müssen, verwenden Sie das LayUI-Framework. Die integrierte Vorlagensyntax, das folgende Bild ist eine Zeitformatkonvertierung der Bewerbungsdatumsspalte:

Rendering:

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine Tabelle in Laui. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!