首页 > 代码库 > jquery easyui tree dialog

jquery easyui tree dialog

<script type="text/javascript" src="http://www.mamicode.com//include/javascript/portalPage/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="http://www.mamicode.com//emr/include/css/zTreeStyle.css" type="text/css"/>
<script type="text/javascript" src="http://www.mamicode.com//userinfo/include/js/jquery.ztree.core-3.5.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com//include/easyui/themes/default/easyui.css" /> 
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com//include/easyui/themes/icon.css"/>
<script language="javascript" src="http://www.mamicode.com//include/easyui/jquery.easyui.min.js"></script>


<script type="text/javascript">

function openDialog(){
$("#nav_ul").tree({
url:‘<%=request.getContextPath()%>/emrpageoffice.do?verbId=privateTreeInit&type=root‘,
valueField: ‘id‘,
textField: ‘text‘,
editable: false,
method: ‘post‘,
onBeforeExpand:function(node) { 
var url1="<%=request.getContextPath()%>/emrpageoffice.do?verbId=privateTreeInit&type=second&parentCode="+node.id;
$(‘#nav_ul‘).tree("options").url=url1;
},
onClick:function(node){
privateIframe = $("#div_right_iframe");
var url2="<%=request.getContextPath()%>/emrpageoffice.do?verbId=detail&id="+node.typeId;
privateIframe.attr("src",url2);
if(node.state=="closed"){
$(‘#nav_ul‘).tree(‘expand‘, node.target);
}else if(node.state=="open"){
$(‘#nav_ul‘).tree(‘collapse‘, node.target);
}
}/* ,
loadFilter: function(rows){
return convert(rows);
} */
});

var h1 = $(document).scrollTop();//滚动条到顶部的垂直高度
var h2 = $(window).height(); //屏幕高度,下面的200是dialog的高度
var w1 = $(window).width(); //屏幕宽度,下面的400是dialog的宽度
$("#mydialog_private").window("open").window("resize",{top:h1+((h2-400)/2),left:(w1-590)/2});
}
</script>
<div onclick="openDialog()" style="cursor: pointer;">添加病历 </div>
<div id="mydialog_private" class="easyui-dialog" title="专用模板类型" data-options="closed:true,modal:true" style="width:590px;height:400px;padding:5px;">
<div style="height: 85%;width: 100%;border:1px solid #dedede;">
<div id="div_left" style="height: 100%;width: 29%;border: 1px solid #00CED1;float:left;margin-left:1px; display:inline">
<ul class="easyui-tree" id="nav_ul">
</ul>
</div>
<div id="div_right" style="height: 100%;width: 70%;float:left; display:inline">
<iframe id="div_right_iframe" name="div_right_iframe" frameborder="0" width="100%" height="100%" src="">
</iframe>
</div>
</div>
<div style="height: 15%;width: 100%;border: 1px solid #dedede;">
<a href="javascript:void(‘0‘)" onclick="addPrivateMenu(0)">新增目录</a>
<a href="javascript:void(‘0‘)" onclick="addPrivateMenu(1)">新增子目录</a>
<a href="javascript:void(‘0‘)" onclick="updatePrivateMenu()">修改</a>
<a href="javascript:void(‘0‘)" onclick="deleteTree()">删除</a>
<a href="javascript:void(‘0‘)" onclick="btnsave()">保存</a>
<a href="javascript:void(‘0‘)" onclick="cancel()">取消</a>
<a href="javascript:void(‘0‘)" onclick="closeDialog()">退出</a>
</div>
</div>

  

jquery easyui tree dialog