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文件--结束--%>
1 添加引用
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 = , l = nodes.length; i < l; i++) {
v += nodes[i].name + ",";
selectIds += nodes[i].id + ",";
}
if (v.length > ) v = v.substring(, v.length - );
if (selectIds.length > ) {
selectIds = selectIds.substring(, selectIds.length - );
}
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 > )) {
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 = , l = nodes.length; i < l; i++) {
v += nodes[i].name + ",";
selectIds2 += nodes[i].id + ",";
}
if (v.length > ) { v = v.substring(, v.length - ); }
if (selectIds2.length > ) {
selectIds2 = selectIds2.substring(, selectIds2.length - );
}
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 > )) {
hideMenu2();
}
}
//清空二级树
function clearSubProcess() {
$("#<%=hidSubProcessNames.ClientID %>").val("");
$("#<%=hidSubProcess.ClientID %>").val("");
$("#<%=dropSubProcess.ClientID %>").val("");
}
</script>
<%--流程类别多选--引用js脚本--结束--%>
设置两个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 = ; 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 = ; 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 = ; 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;
}构建2级联动
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 > ))
{
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 - , );
}
builder.Append("]");
base.Response.Write(builder.ToString());
base.Response.End();
}
RetrieveMDSService.aspx
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> <%--流程类别多选--弹出层--结束--%>
html代码
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 > )
{
sb.Append("["); for (int i = ; i < list.Count; i++)
{ if (list[i] != list[list.Count - ])
{
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();
}
创建一级目录数据源