weixin_49555462
weixin_49555462
采纳率0%
2020-12-14 15:25

layui的treetable在新增完数据后如何实现只刷新我新增的那条数据?

50
已结题

这是页面的代码

@{
    ViewData["Title"] = "区域列表";
    Layout = "~/Views/Shared/_LayoutNone.cshtml";
}
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div style="padding-bottom: 10px;">
                <button class="layui-btn layuiadmin-btn-list" data-type="add"><i class="layui-icon">&#xe654;</i>新增一级区域</button>
                <span style="color: red">&nbsp;&nbsp;提示:此功能仅供开发人员操作使用,请谨慎操作!</span>
            </div>
            <table id="area_tree_data" lay-filter="area_tree_data"></table>
            <script type="text/html" id="table-content-list">
                <a class="layui-btn layui-btn-xs" lay-event="add"><i class="layui-icon layui-icon-add-1"></i>新增</a>
                <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
            </script>
        </div>
    </div>
</div>

<script src="~/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: '/lib/index' //主入口模块
    }).use(['index', 'treeTable'], function () {
        var $ = layui.$
            , table = layui.table
            , form = layui.form
            , admin = layui.admin;

        var treeTable = layui.treeTable;

        // 渲染表格
        treeTable.render({
            elem: '#area_tree_data',
            toolbar: false,
            tree: {
                iconIndex: 1
            },
            cols: [
                [
                {
                    field: "area_id",
                    title: "ID",
                    width: 100,
                },
                {
                    field: "area_name",
                    title: "区域名称",
                    minWidth: 200,
                },
                {
                    field: "short_name",
                    title: "简称",
                    width: 100,
                },
                {
                    field: "area_pinyin",
                    title: "拼音",
                    width: 120,
                },
                {
                    field: "area_lng",
                    title: "经度",
                    width: 120,
                },
                {
                    field: "area_lat",
                    title: "纬度",
                    width: 120,
                },
                {
                    title: "操作",
                    width: 280,
                    align: "center",
                    fixed: "right",
                    toolbar: "#table-content-list"
                }]
            ],
            reqData: function (data, callback) {

                //读取数据加载loading..
                loading = layer.load(2, {
                    shade: [0.2, '#000']
                });

                admin.req({
                    url: '/area/list'
                    , data: { parent_id: data ? data.area_id : "1" }
                    , done: function (res) {
                        layer.close(loading);
                        //console.log('proinvce data=' + JSON.stringify(res.data));
                        callback(res.data);
                    }
                });

            },
            style: 'margin-top:0;'
        });





        //右侧操作事件
        treeTable.on("tool(area_tree_data)", function (t) {
            var layEvent = t.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
            console.log("layEvent="+layEvent)
            var tr = t.tr; //获得当前行 tr 的DOM对象
            console.log("tr=" + JSON.stringify(tr))

            var area_id = t.data.area_id;
            console.log('id=' + area_id);
            if ("del" === t.event) {
                layer.confirm("确定删除此区域?", function (e) {
                    admin.req({
                        headers: {
                            'RequestVerificationToken': csrfToken
                        },
                        method: 'POST',
                        url: '/area/delete/' + area_id
                        , done: function (res) {
                            console.log(res.msg);
                            t.del();
                            layer.close(e);
                        }
                    });

                });
            }
            else if ("add" === t.event) {
                var level_type = t.data.level_type;
                level_type = parseInt(level_type) + 1;
                layer.open({
                    type: 2,
                    title: "新增区域",
                    content: "/area/create?level_type=" + level_type+"&parent_id=" + area_id,
                    maxmin: !0,
                    area: ["550px", "550px"],
                    btn: ["确定", "取消"],
                    yes: function (e, i) {
                        a = i.find("iframe").contents().find("#layuiadmin-app-form-submit");
                        a.trigger("click");
                    }
                })
            }
            else if ("edit" === t.event) {
                layer.open({
                    type: 2,
                    title: "编辑区域",
                    content: "/area/edit?parent_id=" + area_id,
                    maxmin: !0,
                    area: ["550px", "550px"],
                    btn: ["确定", "取消"],
                    yes: function (e, i) {
                        a = i.find("iframe").contents().find("#layuiadmin-app-form-edit");
                        a.trigger("click");
                    }
                })
            }
        });


        var $ = layui.$, active = {
            add: function () {
                layer.open({
                    type: 2
                    , title: '添加一级区域'
                    , content: '/area/create?level_type=1&parent_id=100000'
                    , maxmin: true
                    , area: ['550px', '550px']
                    , btn: ['确定', '取消']
                    , yes: function (index, layero) {
                        //点击确认触发 iframe 内容中的按钮提交
                        var submit = layero.find('iframe').contents().find("#layuiadmin-app-form-submit");
                        submit.click();
                    }
                });
            },
            refresh: function () {
                table.reload('LAY-app-content-list');
            }
        };

        $('.layui-btn.layuiadmin-btn-list').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });


    });
</script>

这个是控制器的代码

 public async Task<IActionResult> List(int parent_id, string area_name)
        {
            try
            {
                if (parent_id == 1)
                {
                    var result = from item in _context.Set<Area>().Where(t => t.level_type.Contains("1"))
                                 select new
                                 {
                                     item.area_id,
                                     item.area_name,
                                     item.parent_id,
                                     item.short_name,
                                     item.level_type,
                                     item.city_code,
                                     item.zip_code,
                                     item.merger_name,
                                     item.area_lng,
                                     item.area_lat,
                                     item.area_pinyin,
                                     haveChild = true,
                                 };

                    var lCount = result.LongCount();

                    if (!string.IsNullOrEmpty(area_name))
                    {
                        result = result.Where(n => n.area_name.Contains(area_name.Trim()));
                    }

                    var list = await result.OrderBy(n => n.area_id).ToListAsync();
                    AddLogs(7, "查询LINQ=" + result.Expression.ToString() + ",DATA=" + list.ToJson());
                    return Json(new { code = 0, msg = "success", data = list, count = lCount });
                }
                else
                {
                    var result = from item in _context.Set<Area>().Where(t => t.parent_id == parent_id)
                                 select new
                                 {
                                     item.area_id,
                                     item.area_name,
                                     item.parent_id,
                                     item.short_name,
                                     item.level_type,
                                     item.city_code,
                                     item.zip_code,
                                     item.merger_name,
                                     item.area_lng,
                                     item.area_lat,
                                     item.area_pinyin,
                                     haveChild = _context.ypk_area.Any(t => t.parent_id == item.area_id),
                                 };

                    var lCount = result.LongCount();
                    if (!string.IsNullOrEmpty(area_name))
                    {
                        result = result.Where(n => n.area_name.Contains(area_name.Trim()));
                    }
                    var list = await result.OrderBy(n => n.area_id).ToListAsync();
                    AddLogs(7, "查询LINQ=" + result.Expression.ToString() + ",DATA=" + list.ToJson());
                    return Json(new { code = 0, msg = "success", data = list, count = lCount });
                }

            }
            catch (Exception ex)
            {
                log.Error(System.Reflection.MethodBase.GetCurrentMethod().DeclaringType.Name + " -> GetDataByPage", ex);
                return Json(new { code = 1, msg = ex.Message });
            }
        }

这个是展示页面

现在是新增完后重载表格,但是我想让它新增完后不要刷新整张表格,只单独刷新刚刚新增的数据就行了。

  • 点赞
  • 收藏
  • 复制链接分享

7条回答

  • qq_38313548 小张帅三代 2月前

    方式一:.新增完成之后后台返回新增的数据,将数据添加到dom中,再重新渲染一次表格,table.rander()

    点赞 评论 复制链接分享
  • alnorthword 禅あ思あ院 3月前

    你不想这样的话, 只能你自己把该信息收到插入到dom中就行啦

    点赞 评论 复制链接分享
  • CJG753951 Java全栈路线 3月前

    原先你的做法是新增完重新发起请求造成的全局重新赋值。你可以让后端那边只提供给你新增后返回该对象的接口,在当前tree对象下进行赋值操作即可实现局部刷新功能。

    点赞 评论 复制链接分享
  • bill20100829 歇歇 4月前

    重新绑定数据源

    点赞 评论 复制链接分享
  • bosaidongmomo bosaidongmomo 4月前
    点赞 评论 复制链接分享
  • bosaidongmomo bosaidongmomo 4月前
  • bosaidongmomo bosaidongmomo 4月前

    <div class="site-text">
          <p>数据的异步请求由以下几个参数组成:</p>
          <table class="layui-table">
            <colgroup>
              <col width="100">
              <col>
            </colgroup>
            <thead>
              <tr>
                <th>参数名</th>
                <th>功能</th>
              </tr> 
            </thead>
            <tbody>
              <tr>
                <td>url</td>
                <td>
                  接口地址。默认会自动传递两个参数:<em>?page=1&amp;limit=30</em>(该参数可通过 request 自定义)
                  <br><em>page</em> 代表当前页码、<em>limit</em> 代表每页数据量
               </td>
              </tr>
              <tr>
                <td>method</td>
                <td>接口http请求类型,默认:get</td>
              </tr>
              <tr>
                <td>where</td>
                <td>接口的其它参数。如:<em>where: {token: 'sasasas', id: 123}</em></td>
              </tr>
              <tr>
                <td>contentType</td>
                <td>发送到服务端的内容编码类型。如果你要发送 json 内容,可以设置:<em>contentType: 'application/json'</em></td>
              </tr>
              <tr>
                <td>headers</td>
                <td>接口的请求头。如:<em>headers: {token: 'sasasas'}</em></td>
              </tr>
              <tr><td colspan="4"><a name="parseData"> </a></td></tr>
              <tr>
                <td><strong>parseData</strong></td>
                <td>
                  <p>数据格式解析的回调函数,用于将返回的任意数据格式解析成 table 组件规定的数据格式。</p>
                  <p>table 组件默认规定的数据格式为(参考:<a href="/demo/table/user/?page=1&amp;limit=30" target="_blank">/demo/table/user/</a>):</p>
                  <pre class="layui-code layui-box layui-code-view layui-code-notepad" lay-title="默认规定的数据格式" lay-skin="notepad"><h3 class="layui-code-h3">默认规定的数据格式<a href="http://www.layui.com/doc/modules/code.html" target="_blank">layui.code</a></h3><ol class="layui-code-ol"><li>{</li><li>  "code": 0,</li><li>  "msg": "",</li><li>  "count": 1000,</li><li>  "data": [{}, {}]</li><li>} </li><li>              </li></ol></pre>
                  <p>很多时候,您接口返回的数据格式并不一定都符合 table 默认规定的格式,比如:</p>
                  <pre class="layui-code layui-box layui-code-view layui-code-notepad" lay-skin="notepad" lay-title="假设您返回的数据格式"><h3 class="layui-code-h3">假设您返回的数据格式<a href="http://www.layui.com/doc/modules/code.html" target="_blank">layui.code</a></h3><ol class="layui-code-ol"><li>{</li><li>  "status": 0,</li><li>  "message": "", </li><li>  "total": 180, </li><li>  "data": {</li><li>    "item": [{}, {}]</li><li>  }</li><li>}</li><li>              </li></ol></pre>
                  <p>那么你需要借助 parseData 回调函数将其解析成 table 组件所规定的数据格式</p>
                  <pre class="layui-code layui-box layui-code-view"><h3 class="layui-code-h3">code<a href="http://www.layui.com/doc/modules/code.html" target="_blank">layui.code</a></h3><ol class="layui-code-ol"><li>table.render({</li><li>  elem: '#demp'</li><li>  ,url: ''</li><li>  ,parseData: function(res){ //res 即为原始返回的数据</li><li>    return {</li><li>      "code": res.status, //解析接口状态</li><li>      "msg": res.message, //解析提示文本</li><li>      "count": res.total, //解析数据长度</li><li>      "data": res.data.item //解析数据列表</li><li>    };</li><li>  }</li><li>  //,…… //其他参数</li><li>});    </li><li>              </li></ol></pre>
                  <p><span style="color:#FF5722;">该参数非常实用,系 layui 2.4.0 开始新增</span></p>
                </td>
              </tr>
              <tr>
                <td>request</td>
                <td>
                  用于对分页请求的参数:page、limit重新设定名称,如:
                  <pre class="layui-code layui-box layui-code-view"><h3 class="layui-code-h3">code<a href="http://www.layui.com/doc/modules/code.html" target="_blank">layui.code</a></h3><ol class="layui-code-ol"><li>table.render({</li><li>  elem: '#demp'</li><li>  ,url: ''</li><li>  ,request: {</li><li>    pageName: 'curr' //页码的参数名称,默认:page</li><li>    ,limitName: 'nums' //每页数据量的参数名,默认:limit</li><li>  }</li><li>  //,…… //其他参数</li><li>});                           </li><li>              </li></ol></pre>
                  那么请求数据时的参数将会变为:<em>?curr=1&amp;nums=30</em>
                </td>
              </tr>
              <tr>
                <td>response</td>
                <td>
                  <a name="response"> </a>
                  <p>您还可以借助 response 参数来重新设定返回的数据格式,如:</p>
                  <pre class="layui-code layui-box layui-code-view"><h3 class="layui-code-h3">code<a href="http://www.layui.com/doc/modules/code.html" target="_blank">layui.code</a></h3><ol class="layui-code-ol"><li>table.render({</li><li>  elem: '#demp'</li><li>  ,url: ''</li><li>  ,response: {</li><li>    statusName: 'status' //规定数据状态的字段名称,默认:code</li><li>    ,statusCode: 200 //规定成功的状态码,默认:0</li><li>    ,msgName: 'hint' //规定状态信息的字段名称,默认:msg</li><li>    ,countName: 'total' //规定数据总数的字段名称,默认:count</li><li>    ,dataName: 'rows' //规定数据列表的字段名称,默认:data</li><li>  } </li><li>  //,…… //其他参数</li><li>});     </li><li>              </li></ol></pre>
                  那么上面所规定的格式为:
                  <pre class="layui-code layui-box layui-code-view layui-code-notepad" lay-title="重新规定的数据格式" lay-skin="notepad"><h3 class="layui-code-h3">重新规定的数据格式<a href="http://www.layui.com/doc/modules/code.html" target="_blank">layui.code</a></h3><ol class="layui-code-ol"><li>{</li><li>  "status": 200,</li><li>  "hint": "",</li><li>  "total": 1000,</li><li>  "rows": []</li><li>} </li><li>              </li></ol></pre>
                </td>
              </tr>
            </tbody>
          </table>
          <p>注意:<em>request 和 response 参数均为 layui 2.1.0 版本新增</em></p>
          <p>调用示例:</p>
          <pre class="layui-code layui-box layui-code-view"><h3 class="layui-code-h3">code<a href="http://www.layui.com/doc/modules/code.html" target="_blank">layui.code</a></h3><ol class="layui-code-ol"><li>//“方法级渲染”配置方式</li><li>table.render({ //其它参数在此省略</li><li>  url: '/api/data/'</li><li>  //where: {token: 'sasasas', id: 123} //如果无需传递额外参数,可不加该参数</li><li>  //method: 'post' //如果无需自定义HTTP类型,可不加该参数</li><li>  //request: {} //如果无需自定义请求参数,可不加该参数</li><li>  //response: {} //如果无需自定义数据响应名称,可不加该参数</li><li>}); </li><li> </li><li>等价于(“自动化渲染”配置方式)</li><li>&lt;table class="layui-table" lay-data="{url:'/api/data/'}" lay-filter="test"&gt; …… &lt;/table&gt;</li><li>      </li></ol></pre>
        </div>

    点赞 评论 复制链接分享