JQuery树形显示笔记

出处:  安释（大象） 优惠政策。 

//明天仔细研究到底怎么把树形存入数据库， 今天先笔记他如何显示出来的

        <td>
                @*弹出一棵树*@
                @*先确认可以弹窗*@
                <a class="easyui-linkbutton" id="policy-edit-district" href="javascript:void(0); ">选择城市</a><br />
                <input id="policy-edit-no-province-val" type="hidden" />
                <input id="policy-edit-no-city-val" type="hidden" />
                <input id="policy-edit-no-district-val" type="hidden" />
            </td>

你会先看到一个选择城市的按钮

//城市选择 选择
        $("#policy-edit-district").click(function () {
            dialogDistrict("policy-chose-no-dis-tree", "policy-edit-no-province-val", "policy-edit-no-city-val", "policy-edit-no-district-val");
            $("#policy-chose-no-dis-dlg").dialog("open");
        });

点击按钮之后触发click事件。      

dialogDistrict 调用了这个方法（方法在下面贴上来）

  //弹出选择城市的方法
        function dialogDistrict(treeId, proId, cityId, disId) {
            $("#" + treeId).tree({
                url: '/api/ContentManage/Policy/Tree?id='+treeId+','+proId+','+cityId+','+disId,
                method: 'post',
                animate: true,
                lines: true,
                checkbox: true,
                onBeforeLoad: function (node, param) {
                    param.action = "GetCityList";
                    param.provinceId = $("#" + proId).val();
                    param.cityId = $("#" + cityId).val();
                    param.districtId = $("#" + disId).val();
                }
            });
        }

通过JQuery的 tree 方法

请求一个 url  ->/api/ContentManage/Policy/Tree?id='+treeId+','+proId+','+cityId+','+disId,

url 返回一个list 而重点在于 返回的这个list!

他是有层级结构的。 代码如下

  var rsta = new List<Object>();
            string strPro = "";
            strPro =
               JsonConvert.SerializeObject(new
               {
                   id = "aa",
                   text="自定义省1",
                   Checked=false,
                   level=1
               });
            rst.Add(JsonConvert.DeserializeObject(strPro));
            string strProb  =
               JsonConvert.SerializeObject(new
               {
                   id = "aa",
                   text = "自定义市1",
                   Checked = false,
                   level = 3
               });
            rsta.Add(JsonConvert.DeserializeObject(strProb));
            string strProa = "";
            strProa =
               JsonConvert.SerializeObject(new
               {
                   id = "aa1",
                   text = "自定义省2",
                   children = rsta,
                   Checked = false,
                   state = "closed",
                   level = 2
               });
            strProa = strProa.Replace("Checked", "checked");
            //// strCity = JsonConvert.SerializeObject(new { id = city.ID, text = city.Name, children = disList, Checked = cityCheck, state = "closed", level = city.Level });
            rst.Add(JsonConvert.DeserializeObject(strProa));


            //rst中存放省数据
            var contry = new List<Object>()
            {
                new {id = 1, text = "全国", level = -1, children = rstList}
            };
            return contry;

大致就是这个思路， 照着这个思路去数据库绑定数据， 然后在前台页面显示

JQuery还是需要静下心来看API  加油吧~