집 > 기사 > 웹 프론트엔드 > Layui 테이블 구성 요소의 일반적인 사용법 요약

Layui 테이블 구성 요소의 일반적인 사용법 요약

尚앞으로: 2019-11-30 13:52:053524검색

테이블은 레이유이의 핵심 구성요소 중 하나입니다. 이는 테이블에서 일련의 기능과 동적 데이터 작업을 수행하는 데 사용되며 일상 업무와 관련된 거의 모든 요구 사항을 충족합니다. 고정 헤더, 고정 행, 고정 열 왼쪽/열 오른쪽 지원, 끌어서 열 너비 변경 지원, 정렬 지원, 다중 레벨 헤더 지원, 셀에 대한 사용자 정의 템플릿 지원, 테이블 오버로드(예: 검색 및 조건부 필터링) 지원 등 ), 확인란 지원, 페이징 지원, 셀 편집 및 일련의 기능을 지원합니다.

아래에 예시가 정리되어 있습니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>layer学习</title>
    <link href="/Content/mycss.css" rel="stylesheet" />
    <link href="/Content/layui/css/layui.css" rel="stylesheet" />
    <script src="/Content/layui/layui.js"></script>
</head>
<body>
    <!--表格-->
    <div id="myTable" lay-filter="test"></div>
    <!--工具栏-->
    <script type="text/html" id="barDemo">
        <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>
    <script type="text/html" id="allow">
        <!-- 这里的 checked 的状态只是演示 -->
        <input type="checkbox" name="{{d.Id}}" value="{{d.Id}}" title="允许" lay-filter="allowSetFilter"  {{ d.IsAllow == true ? &#39;checked&#39; : &#39;&#39; }}>
    </script>
    <script>
        layui.use([&#39;table&#39;,&#39;form&#39;], function () {
            var table = layui.table;
            form = layui.form;
            //*******************************渲染表格**********************************
            table.render({
                //------------------------核心参数
                elem: &#39;#myTable&#39;                         //渲染的dom元素
                , url: &#39;/Home/GetUserList&#39;               //异步请求接口
                , page: true                             //开启分页
                , id: &#39;elementID&#39;                        //容器唯一ID
                , cols: [[                               //列设置
                    { field: &#39;Id&#39;, title: &#39;编号&#39;, sort: true, fixed: &#39;left&#39; }
                    , { field: &#39;Name&#39;, title: &#39;姓名&#39; }
                    , { field: &#39;Age&#39;, title: &#39;年龄&#39; }
                    , { field: &#39;Role&#39;, title: &#39;角色&#39; }
                    , { field: &#39;CreateTime&#39;, title: &#39;创建时间&#39; }
                    , {
                        title: &#39;自定义模板&#39;, width: 200
                        , templet: function (d) {
                            return  &#39;姓名：<span style="color: #c00;">&#39; + d.Name + &#39;</span>&#39;
                        }
                    }
                    , { field: &#39;IsAllow&#39;, title: &#39;是否使用&#39;, templet: &#39;#allow&#39;, unresize: true, align: &#39;center&#39; }
                    , { fixed: &#39;right&#39;, width: 150, align: &#39;center&#39;, toolbar: &#39;#barDemo&#39; }
                ]]

                //-----------------------------异步请求设置
                , method: &#39;post&#39;                          //异步请求方式
                , headers: { hello: &#39;hengheng&#39; }          //在request的header中添加数据
                , request: {                              //request设置，默认值如下
                    pageName: &#39;page&#39;,
                    limitName: &#39;limit&#39;
                }
                , response: {                             //response设置，默认值如下
                    statusName: &#39;code&#39;
                    , countName: &#39;count&#39;
                    , dataName: &#39;data&#39;
                    , msgName: &#39;msg&#39;
                }
                , where: {                                //向后台添加的额外参数
                    nameParm: &#39;u&#39;,
                    roleParm: &#39;o&#39;
                }
                //-----------------------加载的其他选项
                , done: function (res, curr, count) {
                    //res为接口返回的数据、count为数据总长度
                    console.log(res);
                    console.log(curr);
                    console.log(count);
                }
                , text: {
                    none: &#39;暂无相关数据&#39;                   //默认：无数据。
                }
                , initSort: {
                    field: &#39;Id&#39;                           //排序字段为Id
                    , type: &#39;desc&#39;                        //排序方式  asc: 升序、desc: 降序、null: 默认排序
                }
            })

            //*******************************监听表格**********************************

            table.on(&#39;tool(test)&#39;, function (obj) {        //test为lay-filter值
                var data = obj.data;                       //获得当前行数据
                var layEvent = obj.event;                  //获得 lay-event
                var tr = obj.tr;                           //获得当前行 tr 的DOM对象

                if (layEvent === &#39;edit&#39;) {
                    var id = data.Id;
                    layer.open({
                        type: 2
                        , title: &#39;修改&#39;                   //标题栏
                        , scrollbar: false
                        , area: [&#39;400px&#39;, &#39;300px&#39;]
                        , shade: 0.5
                        , id: &#39;layerId&#39;                  //设定一个id，防止重复弹出
                        , moveType: 1                    //拖拽模式，0或者1
                        , content: &#39;/Home/EditUserInfo?id=&#39; + id
                    });
                } else if (layEvent === &#39;del&#39;) {
                    layer.confirm(&#39;真的删除吗？&#39;, function (index) {
                        obj.del();                            //删除对应行（tr）的DOM结构
                        layer.close(index);
                        var id = data.Id;                     //向服务端发送删除指令
                        $.post("/Home/DeleteUserInfo", { "id": id }, function (result) {
                            if (result.IsSuccess === 1) {
                                layer.msg(result.Msg);
                                table.reload(&#39;elementID&#39;);
                            } else {
                                layer.msg(result.Msg);
                                table.reload(&#39;elementID&#39;);
                            }
                        })
                    });
                }
            });

            //*******************************监听checkbox********************************
            //监听操作----置顶
            form.on(&#39;checkbox(allowSetFilter)&#39;, function (obj) {
                var pre = {
                    "Id": this.name,
                    "IsAllow": obj.elem.checked
                };
               //alert(this.name+&#39;----&#39;+obj.elem.checked);
                $.post(&#39;/Home/SetAllow&#39;, pre, function (result) {
                    if (result.IsSuccess === 1) {
                        layer.msg(result.msg)
                    } else {
                        layer.msg(result.msg)
                    }
                })
            });

        });
    </script>
</body>
</html>

layui에 대한 더 많은 지식을 알고 싶으시면 layui 사용법 튜토리얼 칼럼을 주목해 주세요.

위 내용은 Layui 테이블 구성 요소의 일반적인 사용법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

layui table

성명：

이 기사는 cnblogs.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

이전 기사：Layui Laypage 컴포넌트의 일반적인 사용법 요약다음 기사：Layui Laypage 컴포넌트의 일반적인 사용법 요약