Lauiuiでテーブルを作成する方法

テーブル モジュールは、layui のもう 1 つの考え抜かれた作品で、layui 2.0 バージョンで新たに導入され、layui のコア コンポーネントの 1 つです。これはテーブル上で一連の関数と動的なデータ操作を実行するために使用され、日常業務に関わるほぼすべてのニーズをカバーします。推奨: layui 使用法チュートリアル

固定ヘッダー、固定行、固定列左/列右のサポート、列幅変更のためのドラッグのサポート、並べ替えのサポート、マルチレベル ヘッダーのサポート、および単位のサポートグリッドのカスタム テンプレート、テーブルのオーバーロード (検索、条件付きフィルターなど) のサポート、チェック ボックス、ページング、セル編集、およびその他の機能のサポート。

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>

まず、API で記述されている非同期リクエスト データに必要なパラメータを見てみましょう。

デフォルトのパラメータは、page と limit です。必要に応じてパラメータ名を変更できます。2 つのパラメータは、従来のページ番号とページ サイズです。

ここで、その他の追加パラメータは、フロント ページのニーズに応じて値を渡すかどうかを選択できます。

ここでは、(table.js ファイル内の) デフォルト値を変更し、元のページと制限を開始と長さに変更しました:

以下は、バックグラウンド アクション ロジックです:

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

ここでは、フロントエンドの検索ボックスに対応するデフォルトの 2 つのパラメーターに加えて、3 つのパラメーターを追加します。期間は非常に特殊で、以下に示すように、layui に付属する時間ボックスです:

フロントデスクで印刷すると、次の形式が表示されます:

したがって、背景をわかりやすくするために変換する必要があります。フィルタリング:

次に、戻りデータ形式のコードを貼り付けます:

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

ここの LayTableResult は、ページのニーズに応じて自分で定義したクラスです。 、次のようになります (T は返したいテーブルです):

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

この時点で、すべてのロジックが記述されました。条件付きフィルタリングを実行するときは、次のように検索ボタンに属性を追加する必要があります:

次に、操作列が外部 HTML にバインドされます:

列をカスタマイズする必要がある場合は、LayUI フレームワークを使用してください。組み込みのテンプレート構文。次の図は、アプリケーションの日付列の時間形式の変換です。

レンダリング:

##

以上がLauiuiでテーブルを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。