easyui復選框樹動態加載后台數據，實現自動選中數據庫中數據。后台語言是.NET

最近公司做項目用到了easyui復選框樹來實現加載不同類型產品。因為我剛剛畢業，現在也算是實習吧，所以一臉懵逼啊。在公司里的一個哥的幫助下 ，我寫出來這個EasyUi復選框樹了，雖然東西不難，但也是自己弄出來的，有成就感，進步總要一點一點的，經驗需要積累。

先上一下圖片吧 ，輕噴啊  我是應屆生。。。。

 

查看了一下API，

給一組Json數據，其中要包括必要的樹控件的屬性，這下就有了思路。可以順着思路走，既然它需要這些屬性，那么我們就創建一個Model，其中包括這些屬性，名稱要相同哦，

public class TreeModel
    {
        public string id { get; set; }

        public string text { get; set; }

        public string state { get; set; }

        public string iconCls { get; set; }

        //子節點
        public List<TreeModel> children { get; set; }
    }

 

有了Model之后，就可以為這個Model寫方法賦值，把從數據庫里查到的數據賦值給樹節點，這就可以進行數據的展示了，比如此處，我要從數據字典里獲取到產品的類別，然后與數據庫表進行關聯查詢出每個類別下的產品，綁定到model上並賦值給樹。代碼如下

 public List<TreeModel> GetProduct()
         {
            using (DBModelContainer db = new DBModelContainer())
            {
                List<TreeModel> ls = new List<TreeModel>();

                //TreeModel tm = new TreeModel();
                //tm.id = "01";
                //tm.text = "蔬菜";
                //tm.state = "closed";
                //tm.children = GetChild("01");
                //ls.Add(tm);

                ComDictionaryRepository dic=new ComDictionaryRepository(db);
                var query = dic.GetList();

                var queryData = from a in query.ToList()
                                select new TreeModel
                                {
                                    id = a.DicValue,
                                    text = a.DicText,
                                    //iconCls="icon-save"
                                    state = getState(a.DicValue) == true ? "closed" : "open",
                                    children = GetChild(a.DicValue)
                                };
                var list = queryData.ToList();
                return list;
            }
        }

        private bool getState(string ProductId)
        {
            bool b = false;
            if (ProductId!=""&& ProductId!=null)
            {
                b = false;
            }
            else
            {
                b = true;
            }
            return b;
        }
        public List<TreeModel> GetChild(string ParentId)
        {
            List<TreeModel> list;
            if (string.IsNullOrEmpty(ParentId))
            {
                list = new List<TreeModel>();
            }
            else
            {
                using (DBModelContainer db = new DBModelContainer())
                {
                    var queryData = from a in db.Product
                                    where a.ParentId == ParentId
                                    select new TreeModel
                                    {
                                        id = a.ProductId,
                                        text = a.ProductName,
                                        state = "open"//,
                                        //children = GetProduct()
                                    };
                    list = queryData.ToList();

                }

            }
            return list;
        }

代碼寫的有點shit，，，注釋掉的是開始做的時候寫死的，為了看效果，不舍得刪除啊，

接下來就是前台的Js用來接收數據了

$('#myTree').tree({
            url: '/ProductGroup/GetProduct',
            onLoadSuccess: function (node, data) {
                var tree = $(this);
                if (data) {
                    $(data).each(function (index, d) {
                        if (this.state == 'closed') {
                            tree.tree('expandAll');
                        }
                    });
                }
            }
        });

這是Js初始化加載

 

獲取選中的樹節點（可以獲取Id值和文本值），這里我需要的是ID值，下面是Js代碼

//獲取選中的樹節點
    function getChecked() {
        var nodes = $('#myTree').tree('getChecked');
        var s = '';
        for (var i = 0; i < nodes.length; i++) {
            if (s != '') s += ',';
            s += nodes[i].id;
        }
        //alert(s);
        return s;
    }

清除選中復選框的代碼

 function unCheck() {
        var nodes = $('#myTree').tree('getChecked')//獲取選中的樹復選框
        for (var i = 0; i < nodes.length; i++) {
            $('#myTree').tree('uncheck',nodes[i].target);
        }
    }

 

 

在修改數據的時候需要首先加載已存在的數據，對於復選框樹來說，這就涉及到了把對應產品自動選中，實現這個功能最簡單的辦法就是先加載出全部的產品，然后再拿到一組數據與復選框樹全部的ID進行對比，如果相同，設置復選框為選中狀態，否則不操作。

 后台

        /// <summary>
        /// 用來與所有的Tree復選框作對比，並把結果集的對應復選框進行回填
        /// </summary>
        /// <param name="groupId"></param>
        /// <returns></returns>
        public ActionResult GetChecked(string groupId)
        {
            groupId = Request.Params["groupId"];
            List<ProductGroupRelModel> list;
            list = m_BLL.GetChecked(groupId);
            return Json(list, JsonRequestBehavior.AllowGet);
        }

 

下面貼代碼，注釋是我的思考過程，還是舍不得刪除啊~~~~

function EditInfo() {

        if ($('#List').datagrid('getSelections')[0] != null && $('#List').datagrid('getSelections')[0].Id != "") {
            $('#txtName').textbox('setValue', $('#List').datagrid('getSelections')[0].GroupName);
            var groupId = $('#List').datagrid('getSelections')[0].Id;
            
            $.ajax({
                type: "post",
                url: "/ProductGroup/GetChecked",
                data: { "groupId": groupId },
                dataType: "json",
                success: function (data) {
                    
                    // var nodes = $('#myTree').tree('getChecked', 'unchecked');//接收未選中的（因為不知道所有的怎么遍歷所以這里用未選中來代替）
                    var nodes = $('#myTree').tree('getChildren', 'unchecked');
                    //for (var i = 0; i < data.length; i++) {
                    //    //用獲取到的數據的id與所有的id相對比，如果相同了，則設置當前的這個復選框的狀態為被選中
                    //    //。。。怎么設置呢？
                    //    if (nodes[i].id == data.id) {
                    //    //nodes[i].checked = "true";//設置為選中狀態
                    //    $('#myTree').tree('check', nodes[i].target);
                    //    }
                    //}
                    
                    for (var i = 0; i < data.length; i++) {
                        for (var j = 0; j < nodes.length; j++) {
                            if (data[i].Id == nodes[j].id) {
                                $('#myTree').tree('check', nodes[j].target);/////////-----------------tmd!!!!!!這是nodes[J]好不好！！！！！寫什么I ？？？？？
                            }
                            //else {
                            //    $('#myTree').tree('uncheck', nodes[i].target);
                            //}       >>>>>>>>>>>>>>>>>>>>>不知道是什么鬼，加上這個就不能選中了
                        }
                    }
                }
                
            })
            $('#btnSubmit').show();

            $('#infoWindow').panel('setTitle', '修改產品組信息');
            $('#infoWindow').window('open');
            var submitType = 2;
        }
        else {
            $.messager.alert('提示', '請選擇一條數據進行修改!', 'warning');
        }
    }

好了，基本上就是這么個過程，有很多不足的地方，希望朋友們有什么好的想法可以告知小弟一下，

嗯！！！！學習！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！