步步为营103-ZTree 二级联动
1:添加引用
<%--流程类别多选--引用js和css文件--开始--%>
<link rel="stylesheet" href="../css/zTreeStyle/demo.css?version=<%=VersionNo %>>" type="text/css">
<link rel="stylesheet" href="../css/zTreeStyle/zTreeStyle.css" type="text/css">
<%--流程类别多选--引用js和css文件--结束--%>
2:js脚本
<%--流程类别多选--引用js脚本--开始--%>
<script type="text/javascript">
<!--
var setting = {
check: {
enable: true,
chkboxType: { "Y": "s", "N": "ps" }
},
view: {
dblClickExpand: false
},
data: {
simpleData: {
enable: true
}
},
callback: {
beforeClick: beforeClick,
onCheck: onCheck
}
};
var zNodes;
var selectIds = "";
function beforeClick(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeProcessCategory");
zTree.checkNode(treeNode, !treeNode.checked, null, true);
return false;
}
function onCheck(e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeProcessCategory"),
nodes = zTree.getCheckedNodes(true),
v = "";
selectIds = "";
for (var i = 0, l = nodes.length; i < l; i++) {
v += nodes[i].name + ",";
selectIds += nodes[i].id + ",";
}
if (v.length > 0) v = v.substring(0, v.length - 1);
if (selectIds.length > 0) {
selectIds = selectIds.substring(0, selectIds.length - 1);
}
var cityObj = $("#dropParProcessCategory");
cityObj.attr("value", v);
//给隐藏域赋值
setHidDropParProcessCategoryIds(v, selectIds);
selProcessCatergoryChange();
//清空二级树
clearSubProcess();
}
function showMenu() {
var cityObj = $("#dropParProcessCategory");
var cityOffset = $("#dropParProcessCategory").offset();
$("#menuProcessCategory").css({ left: cityOffset.left + "px", top: cityOffset.top + cityObj.outerHeight() + "px" }).slideDown("fast");
$("body").bind("mousedown", onBodyDown);
checkedNodesByProcessCategoryIds();
}
function hideMenu() {
$("#menuProcessCategory").fadeOut("fast");
$("body").unbind("mousedown", onBodyDown);
}
function onBodyDown(event) {
if (!(event.target.id == "menuBtn" || event.target.id == "dropParProcessCategory" || event.target.id == "menuProcessCategory" || $(event.target).parents("#menuProcessCategory").length > 0)) {
hideMenu();
}
}
$(document).ready(function () {
zNodes = eval("(" + $("#<%=hidDropParProcessCategoryDataSource.ClientID %>").val() + ")");
$.fn.zTree.init($("#treeProcessCategory"), setting, zNodes);
$.fn.zTree.init($("#treeDemo"), setting2, zNodes2);
});
function setHidDropParProcessCategoryIds(v, selectIds) {
$("#<%=hidDropParProcessCategoryNames.ClientID %>").val(v, selectIds);
$("#<%=hidDropParProcessCategoryIds.ClientID %>").val(selectIds);
}
</script>
<script type="text/javascript">
var setting2 = {
check: {
enable: true,
chkboxType: { "Y": "", "N": "" }
},
view: {
dblClickExpand: false
},
data: {
simpleData: {
enable: true
}
},
callback: {
beforeClick: beforeClick2,
onCheck: onCheck2
}
};
var zNodes2 = [];
var selectIds2 = "";
function beforeClick2(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.checkNode(treeNode, !treeNode.checked, null, true);
return false;
}
function onCheck2(e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
nodes = zTree.getCheckedNodes(true),
v = "";
selectIds2 = "";
for (var i = 0, l = nodes.length; i < l; i++) {
v += nodes[i].name + ",";
selectIds2 += nodes[i].id + ",";
}
if (v.length > 0) { v = v.substring(0, v.length - 1); }
if (selectIds2.length > 0) {
selectIds2 = selectIds2.substring(0, selectIds2.length - 1);
}
var cityObj = $("#dropSubProcess");
cityObj.attr("value", v);
//给隐藏域赋值
SetValueToHidd(v, selectIds2)
}
function showMenu2() {
var cityObj = $("#dropSubProcess");
var cityOffset = $("#dropSubProcess").offset();
$("#menuContent").css({ left: cityOffset.left + "px", top: cityOffset.top + cityObj.outerHeight() + "px" }).slideDown("fast");
$("body").bind("mousedown", onBodyDown2);
checkedNodesBySubProcessIds();
}
function hideMenu2() {
$("#menuContent").fadeOut("fast");
$("body").unbind("mousedown", onBodyDown2);
}
function onBodyDown2(event) {
if (!(event.target.id == "menuBtn" || event.target.id == "dropSubProcess" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0)) {
hideMenu2();
}
}
//清空二级树
function clearSubProcess() {
$("#<%=hidSubProcessNames.ClientID %>").val("");
$("#<%=hidSubProcess.ClientID %>").val("");
$("#<%=dropSubProcess.ClientID %>").val("");
}
</script>
<%--流程类别多选--引用js脚本--结束--%>
3:页面刷新后状态保持
<%--流程类别多选--查询后再次刷新页面,选中已选中的值--结束--%>
<script type="text/javascript">
function checkedNodesByProcessCategoryIds() {
var zTree = $.fn.zTree.getZTreeObj("treeProcessCategory");
if (zTree == null) {
return;
}
var processCategoryIds = $("#<%=hidDropParProcessCategoryIds.ClientID %>").val()
var ids = processCategoryIds.split(',');
for (var i = 0; i < ids.length; i++) {
var node = zTree.getNodeByParam("id", ids[i], null);
if (node != null) {
node.checked = true;
zTree.updateNode(node);
}
}
};
function checkedNodesBySubProcessIds() {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
if (zTree==null) {
return;
}
var subProcessIds = $("#<%=hidSubProcess.ClientID %>").val()
var ids = subProcessIds.split(',');
for (var i = 0; i < ids.length; i++) {
var node = zTree.getNodeByParam("id", ids[i], null);
if (node != null) {
node.checked = true;
zTree.updateNode(node);
}
}
};
</script>
<%--流程类别多选--查询后再次刷新页面,选中已选中的值--结束--%>
4:二级联动
function selProcessCatergoryChange() { $.ajax({ type: "GET", url: "/Services/RetrieveMDSService.aspx", dataType: "json", cache: true, data: { RetrieveType: "SetParProcessCategorySelectChangeZTree", strId: $("#<%=hidDropParProcessCategoryIds.ClientID %>").val() }, success: function (returnValue) { var vhtml = new Array(); var jsonList = returnValue; for (var i = 0; i < jsonList.length; i++) { //{id:3, pId:0, name:"上海"}, if (jsonList[i].ProcessID != "undefined" && jsonList[i].ProcessID != "") { var eJson = '{id: ' + jsonList[i].ProcessID + ', pId:0, name:\"' + jsonList[i].ProcessName + '\"}'; vhtml.push(eval("(" + eJson + ")")); } } zNodes2 = vhtml; $.fn.zTree.init($("#treeDemo"), setting2, zNodes2); }, error: function (data, textStatus, errorThrown) { } }); } function SetValueToHidd(v, subProcessIDs) { document.getElementById("<%= hidSubProcessNames.ClientID%>").value = v; document.getElementById("<%= hidSubProcess.ClientID%>").value = subProcessIDs; }
private void SetParProcessCategorySelectChangeZTree() { //20140610 Eva Add:设置多语言 string lang = this.GetCurrentLanguage(); StringBuilder builder = new StringBuilder(); builder.Append("["); builder.Append("{"); if (lang == "en-us") { builder.AppendFormat("\"ProcessName\":\"{0}\",", "All"); } else { builder.AppendFormat("\"ProcessName\":\"{0}\",", "全部"); } builder.AppendFormat("\"ProcessID\":\"{0}\"", ""); builder.Append("},"); if ((base.Request.QueryString["strId"] != null) && (base.Request.QueryString["strId"].Trim() != "")) { string strIds = base.Request.QueryString["strId"].Trim(); string whereStr = String.Format(@" select a.sort,b.OrderNo,a.sort,a.* from ProcessPublish a inner join ProcessCategory b on b.ProcessCategoryID = a.ProcessCategoryID and b.IsUse <> 0 where a.ProcessCategoryID in ({0}) and a.isAvailable =1 Order by b.OrderNo,a.sort", strIds); List<IProcessPublish> list = WFModelManager.ProcessPublishDAO.RetrieveListByWhereNoOrder(whereStr); if ((list != null) && (list.Count > 0)) { foreach (IProcessPublish publish in list) { builder.Append("{"); if (lang == "en-us") { builder.AppendFormat("\"ProcessName\":\"{0}\",", publish.ProcessEnglishName); } else { builder.AppendFormat("\"ProcessName\":\"{0}\",", publish.ProcessName); } builder.AppendFormat("\"ProcessID\":\"{0}\"", publish.ProcessID); builder.Append("},"); } } } if (builder.ToString().EndsWith(",")) { builder = builder.Remove(builder.Length - 1, 1); } builder.Append("]"); base.Response.Write(builder.ToString()); base.Response.End(); }
5:html代码
<asp:HiddenField runat="server" ID="hidDropParProcessCategoryIds" /> <asp:HiddenField runat="server" ID="hidDropParProcessCategoryNames" /> <asp:HiddenField ID="hidSubProcessNames" runat="server" Value="" /> <asp:HiddenField ID="hidSubProcess" runat="server" Value="" /> <asp:HiddenField runat="server" ID="hidDropParProcessCategoryDataSource" /> <td> <asp:TextBox ID="dropParProcessCategory" ClientIDMode="Static" runat="server" ReadOnly="true" onfocus="showMenu();"></asp:TextBox> → <asp:TextBox ID="dropSubProcess" ClientIDMode="Static" runat="server" ReadOnly="true" onfocus="showMenu2();"></asp:TextBox> </td> <%--流程类别多选--弹出层--开始--%> <div id="menuProcessCategory" class="menuProcessCategory" style="display: none; position: absolute;"> <ul id="treeProcessCategory" class="ztree" style="margin-top: 0; width: 180px; height: 300px;"></ul> </div> <div id="menuContent" class="menuContent" style="display: none; position: absolute;"> <ul id="treeDemo" class="ztree" style="margin-top: 0; width: 500px; height: 300px;"></ul> </div> <%--流程类别多选--弹出层--结束--%>
6:后台代码
private void InitDropParProcessCategory(IList<IProcessCategory> list) { // { id: 1, pId: 0, name: "北京" }, //{ id: 2, pId: 0, name: "天津" }, //{ id: 3, pId: 0, name: "上海" }, //{ id: 6, pId: 0, name: "重庆" }, StringBuilder sb = new StringBuilder(); if (list != null && list.Count > 0) { sb.Append("["); for (int i = 0; i < list.Count; i++) { if (list[i] != list[list.Count - 1]) { sb.Append("{ id: " + list[i].ProcessCategoryID + ", pId: " + list[i].ParentCategoryID + ", name: \"" + list[i].ProcessCategoryName.Replace(" └ ", "") + "\" },"); } else { sb.Append("{ id: " + list[i].ProcessCategoryID + ", pId: " + list[i].ParentCategoryID + ", name: \"" + list[i].ProcessCategoryName.Replace(" └ ", "") + "\" , open:true}"); } } sb.Append("] "); } hidDropParProcessCategoryDataSource.Value = sb.ToString(); }
