js循环数据时绑定方法并将数据对象传递出来

Posted 2020-11-19 zhoushangwu

代码是参考的layui的作者 贤心 的代码，其他的代码太多了，看的tree中的代码，虽然效果实现了，但是原理不是很清楚，因为涉及到闭包了，而我对于前段只知道基础的东西，对于深入的东西不是很清楚，所以，有幸看到的人，不要问我，我也不懂，嘿嘿

var dictype;

        $(function () {
            ajaxEx("/DictionaryInfo/GetDicType", {}, function (json) {
                if (json.Code == 0) {
                    var data = json.Data;

                    //dic.load(data);
                    //加载数据
                    dictionary.load(data);

                    return;
                }

                alert(json.Message);
            })
        })

        //对象
        var dictionary = {};

        //对象点击方法
        dictionary.click = function (elem,item) {
            //项绑定事件
            elem.children(‘a‘).on("click", function (e) {

                zsw.stope(e);

                dictype = item;

                LoadTable({ code: item.Code });
                //alert(JSON.stringify(item));
            })
        }

        //对象加载数据方法
        dictionary.load = function (json) {

            var dicListObj = $("#dicType");

            var html = "";

            if (json.length > 0) {

                $.each(json, function (i, item) {
                    if (i == 0) {
                        dictype = item;
                    }

                    //此句是关键，function方法闭包，不懂原理，对前端研究不深
                    html = $(["<li>", function () { return "<a>" + item.Name + "</a>" }(), "</li>"].join(‘‘));

                    dicListObj.append(html);

                    //触发单击方法
                    dictionary.click(html,item);

                })
            }

            dicListObj.append("<li> </li>");
        }

        //加载表格
        function LoadTable(obj) {
            var dicitemtable = table.render({
                elem: ‘#dicItem‘
          , url: ‘/DictionaryInfo/GetDicItem‘
          , method: "post"
          , where: obj//{code:dictype.Code}//where: {token: ‘sasasas‘, id: 123}
                //resuest：//用于修改默认的请求中页码的参数名称
          , request: {
              pageName: ‘pageIndex‘ //页码的参数名称，默认：page
                , limitName: ‘pageSize‘ //每页数据量的参数名，默认：limit
          }
                //response 用于定义返回的数据格式
            , response: {
                statusName: ‘Code‘ //数据状态的字段名称，默认：code
                , statusCode: 0 //成功的状态码，默认：0
                , msgName: ‘Message‘ //状态信息的字段名称，默认：msg
                , countName: ‘TotalCount‘ //数据总数的字段名称，默认：count
                , dataName: ‘Data‘ //数据列表的字段名称，默认：data
            }
          , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                //, width: "90%"//$(window).width()- 40
          , cols: [[
            //{ type: ‘checkbox‘ }  //开启多选框
            //{ checkbox: true }
             { type: ‘numbers‘, title: ‘序号‘ }
            //, { field: ‘Id‘, width: 80, title: ‘序号‘, sort: true,style:"display:none;" }//隐藏使用display
            //, { field: ‘numbers‘, width: 80, title: ‘序号‘, sort: true, style: "display:none;" }
            //DKey,Value
            , { field: ‘DKey‘, width: 80, title: ‘值‘, sort: true }
            , { field: ‘Value‘, width: 120, title: ‘显示名称‘, sort: true }
            //, { field: ‘Remark‘, title: ‘说明‘, sort: true/*, templet: ‘#temp1‘ 加载模板*/ }
            , { align: ‘center‘, width: 180, title: ‘操作‘, toolbar: ‘#barDicItem‘ }
          ]]
          , page: false
            , limit: 10
            , limits: [10, 30, 50, 100]
            , id: ‘idTest‘
            });
        }