您的位置:68399皇家赌场 > 服务器租用 > 基于layui数据表格以及传数据的法子

基于layui数据表格以及传数据的法子

发布时间:2019-06-07 19:55编辑:服务器租用浏览(137)

    背景

    背景

    我在此以前一向使用 bootstrap table ,因为近些日子项目中首要利用 Layui 框架,于是也就随了 Layui table ,只是在动用的时候出现了一部分主题素材,当然也是怪自个儿不领悟的锅吧!

    并发的题目:

    一、使用 Layui 官方提供的 【调换静态表格】 格局起头化加载时报 id 找不到的失实(本身的锅)

    二、传递参数难点(姑且算是 Layui 官方的锅)

    背景

    小编从前一向利用 bootstrap table ,因为如今项目中注重选择 Layui 框架,于是也就随了 Layui table ,只是在应用的时候出现了有个别标题,当然也是怪本人面生的锅吧!

    并发的标题:

    一、使用 Layui 官方提供的 【调换静态表格】 情势开端化加载时报 id 找不到的荒谬(本身的锅)

    二、传递参数难点(姑且算是 Layui 官方的锅)

    一般来讲所示:

    小编以前一向选取 bootstrap table ,因为最近项目中驷不及舌运用 Layui 框架,于是也就随了 Layui table ,只是在运用的时候出现了有些难点,当然也是怪本身不熟习的锅吧!

    小编使用的 table 加载刷新方案

    有四个页面,左边是八个 tree,左侧是叁个 table,暗中同意 table 加载全部据,当点击 tree 节点时,table 举办筛选,非常粗略的需要吗!

    图片 1 这里大家不谈 tree 的利用,将只是贴出 table 的连锁方法!

    首先贴出源表格代码:

    <table class="layui-table" lay-filter="EditListTable">
      <thead>
        <tr>
          <th lay-data="{field:'Index', width:60}">序号</th>
          <th lay-data="{field:'UserId', width:80}">销售ID</th>
          <th lay-data="{field:'UserName', width:80}">姓名</th>
          <th lay-data="{field:'Year', width:70}">年份</th>
          <th lay-data="{field:'M01', width:80}">一月</th>
          <th lay-data="{field:'M02', width:80}">二月</th>                            
          <th lay-data="{field:'YearValue', width:80, fixed: 'right'}">年度</th>
          <th lay-data="{width:100, align:'center', toolbar: '#barDemo1', fixed: 'right'}">操作</th>
        </tr>
      </thead>
    </table>
    <script type="text/html" id="barDemo1">
        <a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
    </script> 
    

    一贯在代码中经过注释批注:

    (function () {
        //加载列表的后端 url
        var getListUrl = '';
    
        //对于任意一个 table,按照官方的说法,有三种不同的初始化渲染方式,不多介绍,而这里使用的方式姑且看做第三种:转换静态表格 方式
        //转换静态表格方式,自然首先需要有一个已经存在的表格,然后再通过 js 方式转化为 Layui 表格
        //无论哪种方式的 Layui table 初始化自然需要配置项
        //通过转化的方式初始化 Layui table,配置项部分可以在 源table中,部分在js中,源 table 的源代码上文已经给出,下面给出一个示例的 js 中的配置项
        var tableOptions = {
            url: getListUrl, //请求地址
            method: 'POST', //方式
            id: 'listReload', //生成 Layui table 的标识 id,必须提供,用于后文刷新操作,笔者该处出过问题
            page: false, //是否分页
            where: { type: "all" }, //请求后端接口的条件,该处就是条件错误点,按照官方给出的代码示例,原先写成了 where: { key : { type: "all" } },结果并不是我想的那样,如此写,key 将是后端的一个类作为参数,里面有 type 属性,如果误以为 key 是 Layui 提供的格式,那就大错特错了
            response: { //定义后端 json 格式,详细参见官方文档
                statusName: 'Code', //状态字段名称
                statusCode: '200', //状态字段成功值
                msgName: 'Message', //消息字段
                countName: 'Total', //总数字段
                dataName: 'Result' //数据字段
            }
        };
    
        //
        layui.use(['table', 'layer'], function () {//layui 模块引用,根据需要自行修改
            var layer = layui.layer, table = layui.table;
    
            //表初始化
            var createTable = function () {
                table.init('EditListTable', tableOptions);// table lay-filter
            };
    
            //表刷新方法
            var reloadTable = function (item) {
                table.reload("listReload", { //此处是上文提到的 初始化标识id
                    where: {
                        //key: { //该写法上文已经提到
                            type: item.type, id: item.id
                        //}
                    }
                });
            };
    
            //表初始化
            createTable();
    
            //其他和 tree 相关的方法,其中包括 点击 tree 项调用刷新方法
        });
    })();
    

    后端方法:

    //本示例中,后台代码写法
    public ActionResult GetGoalList(string type, string id)
    {
          //
    }
    
    
    //如果按照官方文档条件项,应该是下面的写法
    public ActionResult GetGoalList(keyItem key)
    {
          //
    }
    public class keyItem
    {
        public string id { get; set; }
        public string type { get; set; }
    }
    

    事例十分的短,仅当参考,借使什么不驾驭的地方,请参见官方文书档案,或请留言!

    我利用的 table 加载刷新方案

    有贰个页面,右侧是一个 tree,左侧是1个 table,暗中认可 table 加载全体据,当点击 tree 节点时,table 进行筛选,很轻便的须求呢!

    图片 2 这里我们不谈 tree 的使用,将独自贴出 table 的有关措施!

    先是贴出源表格代码:

    <table class="layui-table" lay-filter="EditListTable">
      <thead>
        <tr>
          <th lay-data="{field:'Index', width:60}">序号</th>
          <th lay-data="{field:'UserId', width:80}">销售ID</th>
          <th lay-data="{field:'UserName', width:80}">姓名</th>
          <th lay-data="{field:'Year', width:70}">年份</th>
          <th lay-data="{field:'M01', width:80}">一月</th>
          <th lay-data="{field:'M02', width:80}">二月</th>                            
          <th lay-data="{field:'YearValue', width:80, fixed: 'right'}">年度</th>
          <th lay-data="{width:100, align:'center', toolbar: '#barDemo1', fixed: 'right'}">操作</th>
        </tr>
      </thead>
    </table>
    <script type="text/html" id="barDemo1">
        <a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
    </script> 
    

    间接在代码中经过注释解说:

    (function () {
        //加载列表的后端 url
        var getListUrl = '';
    
        //对于任意一个 table,按照官方的说法,有三种不同的初始化渲染方式,不多介绍,而这里使用的方式姑且看做第三种:转换静态表格 方式
        //转换静态表格方式,自然首先需要有一个已经存在的表格,然后再通过 js 方式转化为 Layui 表格
        //无论哪种方式的 Layui table 初始化自然需要配置项
        //通过转化的方式初始化 Layui table,配置项部分可以在 源table中,部分在js中,源 table 的源代码上文已经给出,下面给出一个示例的 js 中的配置项
        var tableOptions = {
            url: getListUrl, //请求地址
            method: 'POST', //方式
            id: 'listReload', //生成 Layui table 的标识 id,必须提供,用于后文刷新操作,笔者该处出过问题
            page: false, //是否分页
            where: { type: "all" }, //请求后端接口的条件,该处就是条件错误点,按照官方给出的代码示例,原先写成了 where: { key : { type: "all" } },结果并不是我想的那样,如此写,key 将是后端的一个类作为参数,里面有 type 属性,如果误以为 key 是 Layui 提供的格式,那就大错特错了
            response: { //定义后端 json 格式,详细参见官方文档
                statusName: 'Code', //状态字段名称
                statusCode: '200', //状态字段成功值
                msgName: 'Message', //消息字段
                countName: 'Total', //总数字段
                dataName: 'Result' //数据字段
            }
        };
    
        //
        layui.use(['table', 'layer'], function () {//layui 模块引用,根据需要自行修改
            var layer = layui.layer, table = layui.table;
    
            //表初始化
            var createTable = function () {
                table.init('EditListTable', tableOptions);// table lay-filter
            };
    
            //表刷新方法
            var reloadTable = function (item) {
                table.reload("listReload", { //此处是上文提到的 初始化标识id
                    where: {
                        //key: { //该写法上文已经提到
                            type: item.type, id: item.id
                        //}
                    }
                });
            };
    
            //表初始化
            createTable();
    
            //其他和 tree 相关的方法,其中包括 点击 tree 项调用刷新方法
        });
    })();
    

    后端方法:

    //本示例中,后台代码写法
    public ActionResult GetGoalList(string type, string id)
    {
          //
    }
    
    
    //如果按照官方文档条件项,应该是下面的写法
    public ActionResult GetGoalList(keyItem key)
    {
          //
    }
    public class keyItem
    {
        public string id { get; set; }
        public string type { get; set; }
    }
    

    事例极短,仅当参谋,借使什么不驾驭的地点,请参谋官方文书档案,或请留言!

    数码表格壹:

    并发的标题:

    <div style="margin:0px; background-color: white; margin:0 10px;">
        <blockquote class="layui-elem-quote">
        <div class="layui-btn-group demoTable">
          <button class="layui-btn" data-type="getCheckData">下载</button></div>
          <form class="layui-form" style="float:right;">
            <div class="layui-form-item" style="margin:0;">
              <label class="layui-form-label">名称</label>
              <div class="layui-input-inline">
                <input type="text" name="zname" placeholder="输入作业名称" autocomplete="off" class="layui-input">
              </div>
              <div class="layui-form-mid layui-word-aux" style="padding:0;">
                <button id="cha" lay-filter="search" class="layui-btn" lay-submit><i class="fa fa-search" aria-hidden="true"></i> 查询</button>
              </div>
            </div>
          </form>
        </blockquote>
      </div>
    <table class="layui-table" lay-data="{url:'../task/selectTask.do', page:true, id:'test2'}">
     <thead>
      <tr>
       <th lay-data="{checkbox:true,fixed:true}"></th>
       <th lay-data="{field:'id', width:60, sort: true}">ID</th>
       <th lay-data="{field:'cid', width:150, sort: true}">课程id</th>
       <th lay-data="{field:'tid', width:150, sort: true}">教师id</th>
       <th lay-data="{field:'zname', width:150, sort: true}">作业名称</th>
       <th lay-data="{field:'ztime', width:150, sort: true,toolbar: '#timeTpl'}">提交时间</th>
       <th lay-data="{field:'zcontext', width:150, sort: true}">作业内容</th>
       <th lay-data="{field:'zremarks', width:150, sort: true}">备注</th>
       <th lay-data="{fixed: 'right', width:100, align:'center', toolbar: '#barDemo1'}"></th>
      </tr>
     </thead>
    </table>
    

    一、使用 Layui 官方提供的 【调换静态表格】 情势开首化加载时报 id 找不到的失实(本人的锅)

    图片 3

    2、传递参数难点(姑且算是 Layui 官方的锅)

    数量传输格局

    本文由68399皇家赌场发布于服务器租用,转载请注明出处:基于layui数据表格以及传数据的法子

    关键词: 68399皇家赌场 JavaScript Web前端 JS&JQ

上一篇:【www.68399.com】WinForm POST上传与后台接受

下一篇:没有了