出处: 安释(大象) 优惠政策。
//明天仔细研究到底怎么把树形存入数据库, 今天先笔记他如何显示出来的
<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 加油吧~