<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="${ctx}/assets/lib/html5.js"></script>
<script type="text/javascript" src="${ctx}/assets/lib/respond.min.js"></script>
<script type="text/javascript" src="${ctx}/assets/lib/PIE_IE678.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="${ctx}/assets/static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/assets/static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/assets/lib/Hui-iconfont/1.0.7/iconfont.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/assets/lib/icheck/icheck.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/assets/static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="${ctx}/assets/static/h-ui.admin/css/style.css" />
<script type="text/ecmascript" src="${ctx}/assets/lib/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="${ctx}/assets/static/h-ui/js/H-ui.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="${ctx}/assets/lib/jqueryui/jquery-ui.css" />
<link rel="stylesheet" type="text/css" media="screen" href="${ctx}/assets/lib/jqgrid/css/ui.jqgrid.css" />
<script type="text/ecmascript" src="${ctx}/assets/lib/jqueryui/jquery-ui.js"></script>
<script type="text/ecmascript" src="${ctx}/assets/lib/jqgrid/js/i18n/grid.locale-cn.js"></script>
<script type="text/ecmascript" src="${ctx}/assets/lib/jqgrid/js/jquery.jqGrid.min.js"></script>
<link rel="stylesheet" href="${ctx}/assets/lib/zTree/v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="${ctx}/assets/lib/zTree/v3/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="${ctx}/assets/js/base.js"></script>
<style type="text/css">
ul.ztree {margin-top: 10px;border: 1px solid #617775;background: #f0f6e4;width:220px;height:360px;overflow-y:scroll;overflow-x:auto;}
</style>
<!--[if IE 6]>
<script type="text/javascript" src="${ctx}/assets/lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<style type="text/css">
select{width: 243px;}
</style>
<script type="text/javascript">
$(function() {
$(window).resize(function(){
$("#tree").setGridWidth($(window).width()-40);
});
$("#tree").jqGrid({
caption:'${TitleName}',
url : '${ctx}/myconsole/dic/getByTree',
editurl:"${ctx}/myconsole/dic/saveOrUpdate", //定义对form编辑时的url
mtype : "POST", // ajax提交方式。POST或者GET，默认GET
postData:{'tablename':'${TableName}'},
hoverrows:false, // 当为false时mouse hovering会被禁用 默认 false
viewrecords:false, // 定义是否要显示总记录数
gridview:true, // 构造一行数据后添加到grid中，如果设为true则是将整个表格的数据都构造完成后再添加到grid中，但treeGrid, subGrid, or afterInsertRow 不能用 默认为false
height:"auto", // 表格高度，可以是数字，像素值或者百分比
rowNum:100, // 在grid上显示记录条数，这个参数是要被传递到后台
scrollrows:true, // 当为true时让所选择的行可见
treeGrid:true, // 启用或者禁用treegrid模式 默认false
ExpandColumn:"tname", // 指定那列来展开tree grid，默认为第一列，只有在treeGrid为true时起作用
treedatatype:"json", // 数据类型，通常情况下与datatype相同，不会变
treeGridModel:"adjacency", // treeGrid所使用的方法
sortorder:"asc", // 排序顺序，升序或者降序（asc or desc） 默认asc
autowidth : true, // 如果为ture时，则当表格在首次被创建时会根据父元素比例重新调整表格宽度。如果父元素宽度改变，为了使表格宽度能够自动调整则需要实现函数：setGridWidth 默认 false
datatype:"json",
pager:"#pager", // 定义翻页用的导航栏，必须是有效的html元素。翻页工具栏可以放置在html页面任意位置
prmNames : { //定义表单的主键 // Default valuesprmNames: {page:“page”,rows:“rows”, sort: “sidx”,order: “sord”, search:“_search”, nd:“nd”, npage:null} 当参数为null时不会被发到服务器端
id: "tid",
oper:"oper",
addoper:"add",
editoper:"edit",
deloper:"del"
},
colModel : [ {
label : '数据编号',
name : 'keyid',
editable: false,
hidden:true
}, {
label : '名称',
name : 'tname',
editable: true,
edittype:"text",
width : 100,
editoptions: {
size:31,
maxlength: 50
},
editrules:{
required: true
},
formoptions:{
elmsuffix:" <span style='color:red'>*<span>",
rowpos:1,
colpos:1
}
},{
label : '编号',
name : 'tid',
editable: true,
edittype: "text",
key : true,
width : 50,
editoptions: {
size:31,
maxlength: 50
},
editrules:{
edithidden:true,
required: true,
custom:true,
custom_func: function(strFieldValue, strFieldName){
var strEnglish = /^([0-9a-zA-Z]+)?$/;
if(!strEnglish.test(strFieldValue)){
return [false, strFieldName+"应该为大小写英文字母或者数字！"];
}
else
{
return [true,""];
}
}
},
formoptions:{
elmsuffix:" <span style='color:red'>*<span>",
rowpos:2,
colpos:1
}
},{
label : '上级编号',
name : 'parentid',
editable: false,
hidden:true
} ,{
label : '排序编号',
name : 'sortid',
editable: true,
hidden : true,
edittype: "text",
width : 100,
editoptions: {
size:31,
maxlength: 5
},
editrules:{
edithidden:true,
required: true,
custom:true,
custom_func: function(strFieldValue, strFieldName){
var strFloat = /^([-\+]?(((\d+)(\.\d+))|(\.\d+)|(\d*)))?$/;
if(!strFloat.test(strFieldValue)){
return [false, strFieldName+"应该为实数"];
}
else
{
return [true,""];
}
}
},
formoptions:{
elmsuffix:" <span style='color:red'>*<span>",
rowpos:3,
colpos:1
}
}, {
label : '链接地址',
name : 'turl',
editable: true,
width : 80,
editrules:{
edithidden:true,
},
editoptions: {
size:50,
maxlength: 50
},
formoptions:{
rowpos:4,
colpos:1
}
},{
label : '是否末级节点',
name : 'isleaf',
editable: true,
edittype: "select",
width : 50,
editrules:{
edithidden : true
},
editoptions:{
dataInit: function(elem){
$(elem).width(218);
},
maxlength: 40,
value : "true:是;false:否"
},
formoptions:{
rowpos:5,
colpos:1
}
}, {
label : '创建人',
name : 'username',
width : 60,
editable: false,
edittype:"text"
}, {
label : '创建时间',
name : 'recordtime',
width : 60,
editable: false,
edittype:"text"
}, {
"name":"treelevel",
"hidden":true
} ],
"treeReader":{
"level_field":"treelevel",
"leaf_field":"isleaf",
"expanded_field":"expanded",
"loaded":"loaded",
"parent_id_field":"parentid",
"icon_field":"icon"
},
loadComplete: function() {
}
});
function getSiteURL(){
var siteName=$("#sitename").val();
if(siteName!=""){
$.post("${ctx}/myconsole/pinyin/getFirstSpell",{"chinese":$("#sitename").val()},function(data){
$("#siteid").val(data);
})
}
}
jQuery('#tree').jqGrid('navGrid','#pager',
{
add : true,
edit : true,
del : true,
search : false,
refresh : true,
view : false,
position : "left",
cloneToTop : true
},
//编辑按钮事件处理
{
closeAfterEdit : true,
recreateForm : true,
width:700,
afterShowForm : function(formid) {
var tidObj = formid.find('#tid');
tidObj.attr('readOnly',true);
tidObj.css({'background':'#cccccc'});
},
beforeSubmit: function(postdata, formid){
// 编辑时jqgrid 将主键变成 tree_id 手动添加 keyid
//postdata["keyid"] = postdata.tree_id;
$.each(postdata,function (index, value) {
if(index!="oper"){
modifyJosnKey(postdata,index,"dic."+index);
}
})
postdata["dic.tablename"]="${TableName}";
return [true,'']; //返回值必须这么写 目前没找到原因，用true 和 返回对象都不好使。待查
},
afterSubmit: function(response,postdata)
{
var res=eval('(' + response.responseText + ')');
if(res.flag)
{
parent.layer.alert(res.message, {
skin: 'layui-layer-molv' //样式类名
,closeBtn: 0
});
return [true,res.message,''];
}
else
{
parent.layer.alert(res.message, {
skin: 'layui-layer-molv' //样式类名
,closeBtn: 0
});
return [false,res.message,''];
}
},
afterComplete : function (response, postdata, formid) {
//取消选择
$("#tree").jqGrid("resetSelection");
//关闭对话框
$(".ui-icon-closethick").trigger('click');
},
errorTextFormat : function(data) {
return 'Error: ' + data.responseText
}
},
//添加按钮处理事件
{
closeAfterAdd : true,
recreateForm : true,
checkOnUpdate : true,
checkOnSubmit : true,
width:700,
afterShowForm : function(formid) {
},
serializeEditData: function(postdata) {
//对主键字段进行赋值传递 韩林平
var selRowId = $("#tree").jqGrid ('getGridParam', 'selrow');
if(selRowId == null) selRowId = "";
//获取选中的父节点主键值,添加下级站点
postdata.parentid=selRowId;
$.each(postdata,function(index,value){
if(index!="oper"){
modifyJosnKey(postdata,index,"dic."+index);
}
})
//jqgrid 做添加操作会把主键id的值设置成“_empty”;这里修改成空;
postdata["dic.keyid"]="";
postdata["dic.tablename"]="${TableName}";
return postdata;
},
afterSubmit: function(response,postdata)
{
var res=eval('(' + response.responseText + ')');
if(res.flag)
{
parent.layer.alert(res.message, {
skin: 'layui-layer-molv' //样式类名
,closeBtn: 0
});
return [true,res.message,''];
}
else
{
parent.layer.alert(res.message, {
skin: 'layui-layer-molv' //样式类名
,closeBtn: 0
});
return [false,res.message,''];
}
},
errorTextFormat : function(data) {
return 'Error: ' + data.responseText
}
},
// options for the Delete Dailog
{
delData:{
dictablename:function(){
var value="${TableName}";
return value;
}
},
errorTextFormat : function(data) {
return 'Error: ' + data.responseText
},
afterSubmit: function(response,postdata)
{
var res=eval('(' + response.responseText + ')');
if(res.flag)
{
//alert(res.message);
parent.layer.alert(res.message, {
skin: 'layui-layer-molv' //样式类名
,closeBtn: 0
});
return [true,res.message,''];
}
else
{
return [false,res.message,''];
}
}
});
jQuery('#tree').jqGrid('bindKeys');
})
var zTree;
var setting = {
check: {
enable: true,
chkStyle: "radio",
radioType: "all"
},
data: {
simpleData: {
enable: true,
idKey: "KeyID",
pIdKey: "ParentID",
rootPId: 0
},
key:{
name:"SiteName"
}
},
callback: {
onClick: onClick,
onCheck: onCheck
}
};
var zNodes =${DicDataList};
function onClick(e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeSite");
zTree.checkNode(treeNode, !treeNode.checked, null, true);
return false;
}
function onCheck(){
}
function showMenu() {
var cityObj = $("#citySel");
var cityOffset = $("#citySel").offset();
$("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");
$("body").bind("mousedown", onBodyDown);
}
function hideMenu() {
$("#menuContent").fadeOut("fast");
$("body").unbind("mousedown", onBodyDown);
}
function onBodyDown(event) {
if (!(event.target.id == "menuBtn" || event.target.id == "citySel" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
hideMenu();
}
}
$(function(){
zTree=$.fn.zTree.init($("#treeSite"), setting, zNodes);
});
//表单验证
</script>
<title>我的桌面</title>
</head>
<body>
<div class="page-container">
<table id="tree"></table>
<div id="pager"></div>
</div>
<div id="menuContent" class="menuContent" style="display:none; position: absolute;">
<ul id="treeSite" class="ztree" style="margin-top:0; width:300px; height: 300px;"></ul>
</div>
<footer class="footer mt-20">
<div class="container">
<p> </p>
</div>
</footer>
</body>
</html>