【.net开发】jqueryui弹窗bug，多弹出一个空白窗口，求助
0
悬赏园豆：100
[已关闭问题]
关闭于 2016-10-29 23:57
求大神帮助，各位来猜猜也行。你出想法，我来实验
弹窗代码如下：
<!-- Ztree -->
@{Html.RenderPartial("~/Views/Shared/Script.zTree.cshtml");}
<!-- DataSource -->
@{Html.RenderPartial("~/Areas/Core/Views/DepartmentManagement/Department/DataSource.Department.cshtml");}
<!-- 选择科室 -->
<div id="select_department_dialog" style="display:none;">
<div id="select_department_tree_border_div" class="select-department-tree-div">
<ul id="select_department_z_tree" class="ztree"></ul>
</div>
</div>
<!-- 选择科室样式 -->
<style type="text/css">
/* ZTree样式 */
#select_department_dialog .ztree * {
padding-top: 4.5px;
font-size: 14px;
font-family: "microsoft yahei";
}
/* 科室选择 */
#select_department_dialog .select-department-tree-div {
height: 500px;
margin-bottom: 10px;
/*border: 1px solid #c5c5c5;*/
background-color: #ffffff;
border-radius: 4px;
}
</style>
<!-- 窗口初始化 -->
<script type="text/javascript">
$(function () {
(function ($) {
if (!$.isPlainObject($.SelectDepartmentDialog)) {
/* Dialog命名空间声明 */
$.SelectDepartmentDialog = {};
var selectDepartmentDialogID = "select_department_dialog";
/* 窗口初始化 */
var selectDepartmentDialog = $("div#" + selectDepartmentDialogID);
/* 回调函数 */
var callbackFunction;
var rootNodeID = "@Common.Enumeration.CommonEnum.Department.ROOT_NODE_ID";
/* 不能选中的节点 */
var disabledNodeIDList;
selectDepartmentDialog.dialog({
autoOpen: false,
closeText: "关闭",
height: 500,
width: 480,
resizable: false,
modal: true,
title: "选择科室",
open: function () {
//if (addDepartmentDialog.attr("isMiniUIParse") == "false") {
// mini.parse();
// addDepartmentDialog.attr("isMiniUIParse", "true");
//}
},
buttons: [{
text: "保存",
icons: {
primary: "dialog-button-icon-save"
},
click: function () {
/* 判断是否已选中 */
var callbackParameterMap = {
/* 选中的科室ID selectedDepartmentID */
/* 选中的科室Name selectedDepartmentName */
};
var selectDepartmentZTree = $.fn.zTree.getZTreeObj("select_department_z_tree");
var selectNodes = selectDepartmentZTree.getSelectedNodes();
if (selectNodes.length == 0) {
$.MessageDialog.showMessageDialog({
Message: "请至少选中一个科室！",
ImageType: $.MessageDialog.ImageType.Error
});
return;
}
if (selectNodes.length > 1) {
$.MessageDialog.showMessageDialog({
Message: "最多只能选中一个科室！",
ImageType: $.MessageDialog.ImageType.Error
});
return;
}
var selectNode = selectNodes[0];
var departmentAllParentIDList = selectNode["departmentAllParentIDList"];
var departmentAllParentNameList = selectNode["departmentAllParentNameList"];
var selectedDepartmentAllParentIDList = "";
/* 用于显示的值 */
var selectedDepartmentAllParentNameList = "";
/* 用于保存的值 */
var selectedDepartmentAllParentNameValueList = "";
if (departmentAllParentIDList == "") {
/* 选中的节点没有父节点 */
if (selectNode["departmentID"] == rootNodeID) {
/* 如果选中的节点是“顶级科室” */
selectedDepartmentAllParentIDList = "";
selectedDepartmentAllParentNameList = "顶级科室";
selectedDepartmentAllParentNameValueList = "";
} else {
selectedDepartmentAllParentIDList = selectNode["id"];
selectedDepartmentAllParentNameList = selectNode["name"];
selectedDepartmentAllParentNameValueList = selectNode["name"];
}
} else {
/* 选中的节点含有父节点 */
selectedDepartmentAllParentIDList = departmentAllParentIDList + "," + selectNode["id"];
selectedDepartmentAllParentNameList = departmentAllParentNameList + "," + selectNode["name"];
selectedDepartmentAllParentNameValueList = departmentAllParentNameList + "," + selectNode["name"];
}
callbackParameterMap["selectedDepartmentAllParentIDList"] = selectedDepartmentAllParentIDList;
callbackParameterMap["selectedDepartmentAllParentNameList"] = selectedDepartmentAllParentNameList;
callbackParameterMap["selectedDepartmentAllParentNameValueList"] = selectedDepartmentAllParentNameValueList;
callbackParameterMap["selectDepartmentID"] = selectNode["departmentID"];
/* 执行回调函数 */
if ($.isFunction(callbackFunction)) {
selectDepartmentDialog.dialog("close");
callbackFunction(callbackParameterMap);
}
}
}, {
text: "取消",
icons: {
primary: "dialog-button-icon-cancel"
},
click: function () {
selectDepartmentDialog.dialog("close");
}
}],
close: function (event, ui) {
}
});
/* 渲染科室树 */
var renderSelectDepartmentZTree = function (departmentList, currentSelectedDepartmentID, ifHasTopNode, currentSelectedDepartmentAllParentID) {
var selectDepartmentZTree = $.fn.zTree.getZTreeObj("select_department_z_tree");
var parentIcon = "/Image/Core/DepartmentManagement/parent.png";
var leafIcon = "/Image/Core/DepartmentManagement/leaf.png";
var treeNodesArray = [];
if (ifHasTopNode == "1") {
treeNodesArray[0] = {
id: rootNodeID,
pId: "",
name: "顶级科室",
departmentID: rootNodeID,
departmentAllParentIDList: "",
departmentAllParentNameList: "",
open: true,
isParent: true,
icon: parentIcon,
iconOpen: parentIcon,
iconClose: parentIcon
}
}
for (var i = 0; i < departmentList.length; i++) {
var departmentItem = departmentList[i];
var departmentID = departmentItem["DepartmentID"];
var departmentNextLevelNodeCount = departmentItem["DepartmentNextLevelNodeCount"];
var isParentFlg = false;
var iconSkinName = leafIcon;
if (departmentNextLevelNodeCount != "0") {
isParentFlg = true;
iconSkinName = parentIcon;
}
treeNodesArray[treeNodesArray.length] = {
id: departmentID,
pId: departmentItem["DepartmentParentID"],
name: departmentItem["DepartmentName"],
departmentID: departmentID,
departmentAllParentIDList: departmentItem["DepartmentAllParentID"],
departmentAllParentNameList: departmentItem["DepartmentAllParentName"],
open: false,
isParent: isParentFlg,
icon: iconSkinName,
iconOpen: iconSkinName,
iconClose: iconSkinName
// click: "departmentZTreeNodeClick('" + isParentFlg + "','" + departmentID + "')"
};
}
var setting = {
data: {
//数据是否采用简单 Array 格式，默认false
simpleData: {
enable: true
}
},
view: {
fontCss: setDepartmentZTreeNodeFontCss
//fontCss: { color: "red"}
},
callback: {
/* 展开 */
beforeExpand: onSelectDepartmentZTreeBeforeExpand,
/* 单击 */
beforeClick: onSelectDepartmentZTreeBeforeClick
},
expandSpeed: "normal",
treeNodeKey: "id", //在isSimpleData格式下，当前节点id属性
treeNodeParentKey: "pId", //在isSimpleData格式下，当前节点的父节点id属性
showLine: true, //是否显示节点间的连线
checkable: false //每个节点上是否显示 CheckBox
};
var treeObj = $.fn.zTree.init($("#select_department_z_tree"), setting, treeNodesArray);
if (typeof(currentSelectedDepartmentAllParentID)!= "undefined" && currentSelectedDepartmentAllParentID != "") {
/* 迭代目前选中节点的父节点集合，将这些节点添加到Ztree中,才能定位到该节点 */
var currentDepartmentParentIDList = currentSelectedDepartmentAllParentID.split(',');
searchDepartmentZtreeSelectNodeByIteration(currentDepartmentParentIDList, currentSelectedDepartmentID);
} else {
/* 默认选中 */
var selectedNode = treeObj.getNodeByParam("departmentID", currentSelectedDepartmentID, null);
//选中默认节点
treeObj.selectNode(selectedNode);
}
}
/* 设置字体颜色。（不可选节点的字体颜色需要特别设置：当前修改节点及其子节点） */
var setDepartmentZTreeNodeFontCss = function (treeId, treeNode) {
if (typeof (disabledNodeIDList) == "undefined" || disabledNodeIDList.length == 0)
{
return {};
}
/* 不可选节点集合中含有当前元素 */
if (disabledNodeIDList.indexOf(treeNode["departmentID"]) >= 0) {
return { color: "#ccc9c9" };
}
};
/* 单击节点事件：不可选节点单击后不能选中 */
var onSelectDepartmentZTreeBeforeClick = function (treeId, treeNode) {
if (typeof (disabledNodeIDList) == "undefined" || disabledNodeIDList.length == 0) {
return true;
}
/* 不可选节点集合中含有当前元素 */
if (disabledNodeIDList.indexOf(treeNode["departmentID"]) >= 0) {
return false;
}
};
/* 迭代展开Ztree，默认选中调用dialog前已选的节点 */
var searchDepartmentZtreeSelectNodeByIteration = function (currentDepartmentParentIDList, currentSelectedDepartmentID) {
if (currentDepartmentParentIDList.length == 0) {
var treeObj = $.fn.zTree.getZTreeObj("select_department_z_tree");
/* 默认选中 */
var selectedNode = treeObj.getNodeByParam("departmentID", currentSelectedDepartmentID, null);
//选中默认节点
treeObj.selectNode(selectedNode);
return;
}
var loadPagePanel = mini.loading("正在查询科室信息...", messageDialogTitle);
var errorFunction = function () {
$.MessageDialog.showMessageDialog({
Message: "查询科室信息失败！",
ImageType: $.MessageDialog.ImageType.Error
});
mini.hideMessageBox(loadPagePanel);
};
var treeObj = $.fn.zTree.getZTreeObj("select_department_z_tree");
var parentNode = treeObj.getNodeByParam("departmentID", currentDepartmentParentIDList[0], null);
//var childNodes = parentNode.children;
//if (typeof (childNodes) != "undefined") {
// return;
//}
/* 之前未查询过，需要调用ajax进行查询子节点 */
var conditionMap = {
"DepartmentParentID,Eq": currentDepartmentParentIDList[0]
};
var resultMap = {};
//when + 渲染 + 父节点处理+移除 +迭代
$.when(
$.DataSource.Department.searchDepartmentList($.Deferred(), conditionMap, resultMap, "resultDepartmentList")
).done(function () {
/* 科室信息 */
if (!$.isArray(resultMap["resultDepartmentList"])) {
errorFunction();
return;
}
var resultDepartmentList = resultMap["resultDepartmentList"];
/* 渲染Ztree：将每次查询到的子节点赋值给Ztree */
renderSelectDepartmentZTreeBySearchResult(resultDepartmentList, parentNode);
/* 此处执行nodeList拼接节点 */
var nodeList = new Array();
/* 设置子节点。判断+ 加到父ID集合中+回调迭代方法 */
if (resultDepartmentList.length > 0) {
for (var i = 0; i < resultDepartmentList.length; i++) {
var departmentTreeDataMap = resultDepartmentList[i];
nodeList.push(departmentTreeDataMap);
}
/* 移除第一个元素 */
currentDepartmentParentIDList.shift();
/* 迭代展开 */
searchDepartmentZtreeSelectNodeByIteration(currentDepartmentParentIDList, currentSelectedDepartmentID);
}
mini.hideMessageBox(loadPagePanel);
}).fail(function () {
errorFunction();
return;
});
};
/* 展开树节点 */
var onSelectDepartmentZTreeBeforeExpand = function (treeId, treeNode) {
/* treeId:对应 zTree 的 treeId; treeNode:要展开的父节点 JSON 数据对象*/
/* 判断是否有子节点，若有，则说明展开过，就不再进行查询TODO 还是设置一个“是否展开过属性”比较好？ */
var childNodes = treeNode.children;
if (typeof (childNodes) != "undefined") {
return;
}
var departmentID = treeNode["departmentID"];
/* 查询该节点下的子节点信息 */
var conditionMap = {
"DepartmentParentID,Eq": departmentID
};
/* 查询结果集合 */
var resultMap = {
};
var loadPagePanel = mini.loading("正在查询科室信息...", messageDialogTitle);
var errorFunction = function () {
$.MessageDialog.showMessageDialog({
Message: "查询科室信息失败！",
ImageType: $.MessageDialog.ImageType.Error
});
mini.hideMessageBox(loadPagePanel);
};
$.when(
$.DataSource.Department.searchDepartmentList($.Deferred(), conditionMap, resultMap, "resultDepartmentList")
).done(function () {
/* 科室信息 */
if (!$.isArray(resultMap["resultDepartmentList"])) {
errorFunction();
return;
}
renderSelectDepartmentZTreeBySearchResult(resultMap["resultDepartmentList"], treeNode);
mini.hideMessageBox(loadPagePanel);
}).fail(function () {
errorFunction();
return;
});
};
/* 根据每次的查询结果渲染Ztree */
var renderSelectDepartmentZTreeBySearchResult = function (resultDepartmentList, treeNode) {
/* 渲染ZTree信息，将查出来的节点信息添加到ZTree上 */
var departmentList = $.CommonFunction.decodeObjectList(resultDepartmentList);
var newTreeNodesArray = [];
for (var i = 0; i < departmentList.length; i++) {
var departmentItem = departmentList[i];
var departmentID = departmentItem["DepartmentID"];
var departmentNextLevelNodeCount = departmentItem["DepartmentNextLevelNodeCount"];
var parentIcon = "/Image/Core/DepartmentManagement/parent.png";
var leafIcon = "/Image/Core/DepartmentManagement/leaf.png";
var iconSkinName = leafIcon;
var isParentFlg = false;
if (departmentNextLevelNodeCount != "0") {
isParentFlg = true;
iconSkinName = parentIcon;
}
newTreeNodesArray[newTreeNodesArray.length] = {
id: departmentID,
pId: departmentItem["DepartmentParentID"],
name: departmentItem["DepartmentName"],
departmentID: departmentID,
departmentAllParentIDList: departmentItem["DepartmentAllParentID"],
departmentAllParentNameList: departmentItem["DepartmentAllParentName"],
open: false,
isParent: isParentFlg,
icon: iconSkinName,
iconOpen: iconSkinName,
iconClose: iconSkinName
//click: "departmentZTreeNodeClick('" + isParentFlg + "','" + departmentID + "')"
};
}
var selectDepartmentZTree = $.fn.zTree.getZTreeObj("select_department_z_tree");
/* 方法二： 为解决重复添加问题，先删除原有子节点，再添加 */
//selectDepartmentZTree.removeChildNodes(treeNode);
selectDepartmentZTree.addNodes(treeNode, newTreeNodesArray);
};
/* 显示“科室选择”窗口 */
$.SelectDepartmentDialog.showSelectDepartmentDialog = function (option) {
/* 当前已有科室，应该默认选中。父节点没问题，叶子节点应该展开至其所在位置：20160722解决了此问题 */
/* 将所有父节点迭代，查询出来目前已选中的节点，即可定位。 */
/* 0721 添加科室时，需要“顶级科室”节点。其他时候暂不用该节点。故修改为可控方式 ifHasTopNode(0：没有顶级节点。1：有顶级节点) */
/* 0811 disabledNodeIDList 不可选节点ID集合 */
var currentSelectedDepartmentID = option["currentSelectedDepartmentID"];
var currentSelectedDepartmentAllParentID = option["currentSelectedDepartmentAllParentID"];
callbackFunction = option["Callback"];
/* 默认没有顶级节点 */
var ifHasTopNode = "0";
if (typeof (option["ifHasTopNode"]) != "undefined") {
ifHasTopNode = option["ifHasTopNode"];
}
disabledNodeIDList = option["disabledNodeIDList"];
var loadPagePanel = mini.loading("正在查询科室信息...", messageDialogTitle);
var errorFunction = function () {
$.MessageDialog.showMessageDialog({
Message: "查询科室信息失败！",
ImageType: $.MessageDialog.ImageType.Error
});
mini.hideMessageBox(loadPagePanel);
};
var conditionMap = {
"DepartmentParentID,Eq": "@Common.Enumeration.CommonEnum.Department.ROOT_NODE_ID"
};
/* 查询结果集合 */
var resultMap = {
};
$.when(
$.DataSource.Department.searchDepartmentList($.Deferred(), conditionMap, resultMap, "resultDepartmentList")
).done(function () {
/* 科室信息 */
if (!$.isArray(resultMap["resultDepartmentList"])) {
errorFunction();
return;
}
/* 渲染选择科室窗口 */
renderSelectDepartmentZTree($.CommonFunction.decodeObjectList(resultMap["resultDepartmentList"]),
currentSelectedDepartmentID, ifHasTopNode, currentSelectedDepartmentAllParentID);
selectDepartmentDialog//这里是文档开头定义的选择器，如果直接在这里写选择器是可以解决问题的，但师傅说可能是引包的问题，问问各位大神可能是什么问题。
.dialog("option", "position", { my: "center", at: "center", of: window })
.dialog("open");
mini.hideMessageBox(loadPagePanel);
}).fail(function () {
errorFunction();
return;
});
};
}
})(jQuery)
});
</script>
最后html渲染出的代码是这样的：
