@{
ViewBag.Title = "Test";
}
<div class="content-container-fluid">
<div class="row">
<div class="cols-sample-area">
<div class="frame">
<div class="control">
<!--Render dropdown list-->
<input type="text" id="drpdwn" />
<div id="target">
<ul>
<li>
<!--Treeview Template begin-->
<div id="control-wrap" class="wrapper">
<div id="treeView">
</div>
</div>
<!--Treeview Template end-->
</li>
</ul>
</div>
<input type="button" onclick="getValue();" value="获取值" />
</div>
</div>
</div>
</div>
</div>
<link rel='nofollow' href="~/Content/ej/web/default-theme/ej.web.all.min.css" rel="stylesheet" />
<script src="~/Scripts/jsrender.min.js"></script>
<script src="~/Scripts/jquery.easing.1.3.js"></script>
<script src="~/Scripts/ej/web/ej.web.all.min.js"></script>
<script src="~/Scripts/common.js"></script>
<script src="~/JsPlugin/Syncfusion/CustomWebApiAdapter.js"></script>
<script type="text/javascript">
var initialLoad = true;
var dataManager = ej.DataManager({
url: '/api/Organization/GetOrganizationTree',
crossDomain: true,
adaptor: new ej.CustomWebApiAdapter()
});
$(function () {
ej.DropDownList.prototype._OnMouseClick = function (e) { }
ej.DropDownList.prototype._OnMouseEnter = function (e) { }
ej.DropDownList.prototype._OnMouseLeave = function (e) { }
ej.DropDownList.prototype._OnKeyUp = function (e) { }
ej.DropDownList.prototype._OnKeyDown = function (e) { }
//Render Controls
$("#drpdwn").ejDropDownList({
targetID: "target",
popupHeight: "130px",
watermarkText: "选择",
width: "300px"
});
$("#treeView").ejTreeView({
fields: { id: "id", parentId: "pid", text: "text", hasChild: "hasChild", dataSource: dataManager, expanded: "expanded" },
width: "100%",
nodeExpand: checkScroll,
nodeCollapse: checkScroll,
nodeClick: onNodeClick,
});
treeobj = $("#treeView").data("ejTreeView");
drpdwnobj = $("#drpdwn").data("ejDropDownList");
});
function onNodeClick(args) {
var cContent = $(args.currentElement).attr("class");
if (cContent.indexOf("e-text") >= 0) {
var index = treeobj.getSelectedNodeIndex();
setValue(treeobj.getTreeData()[index].id, treeobj.getTreeData()[index].name);
drpdwnobj.hidePopup();
}
}
// check & uncheck the checkbox when click on text
$("#treeView").on("click", "ul li a.e-text", function (e) {
//清空dropdownlist的text
drpdwnobj.clearText();
treeobj.selectNode($(e.target).closest("li"));
});
function checkScroll(args) {
if (initialLoad == true) {
drpdwnobj.hidePopup();
initialLoad = false;
}
else {
drpdwnobj.ultag.find("li").eq(0).height($("#control-wrap").outerHeight());
var scrolpos = drpdwnobj.scrollerObj.model.scrollTop;
drpdwnobj._refreshScroller();
drpdwnobj.popupList.css("display", "block");
drpdwnobj.scrollerObj.setModel({ "scrollTop": scrolpos });
}
}
function setValue(currentValue, currentText) {
drpdwnobj._hiddenValue = currentValue;
drpdwnobj._addText(currentText);
drpdwnobj.model.value = currentValue;
}
function getValue()
{
alert(drpdwnobj.option("value"));
}
</script>
