码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2018-06-17 00:11:29      阅读:349      评论:0      收藏:0      [点我收藏+]

标签:highlight   ons   click   mtab   app   lis   enter   rip   tle   

代码是参考的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‘
            });
        }

  

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

标签:highlight   ons   click   mtab   app   lis   enter   rip   tle   

原文地址:https://www.cnblogs.com/zhoushangwu/p/9191730.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!