<%@ page contentType="text/html; charset=UTF-8" %>
<%
String path = request.getContextPath();
%>
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - Simple Data</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<SCRIPT type="text/javascript">
var contextpath = "<%=path%>";
</SCRIPT>
<style type="text/css">
.myul li{float:left;width:100px;display:inline;}
</style>
<link href="<%=path %>/frameworks/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
<script src="<%=path %>/frameworks/jquery/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="<%=path %>/frameworks/ligerUI/js/core/base.js" type="text/javascript"></script>
<script src="<%=path %>/frameworks/ligerUI/js/plugins/ligerDialog.js" type="text/javascript"></script>
<script src="<%=path %>/frameworks/ligerUI/js/plugins/ligerTextBox.js" type="text/javascript"></script>
<script src="<%=path %>/frameworks/ligerUI/js/plugins/ligerCheckBox.js" type="text/javascript"></script>
<script src="<%=path %>/frameworks/ligerUI/js/plugins/ligerComboBox.js" type="text/javascript"></script>
<script src="<%=path %>/frameworks/ligerUI/js/plugins/ligerGrid.js" type="text/javascript"></script>
<script src="<%=path %>/frameworks/ligerUI/js/plugins/ligerDateEditor.js" type="text/javascript"></script>
<script src="<%=path %>/frameworks/ligerUI/js/plugins/ligerSpinner.js" type="text/javascript"></script>
<script src="<%=path %>/frameworks/ligerUI/js/plugins/ligerResizable.js" type="text/javascript"></script>
<script src="<%=path %>/js/json2.js" type="text/javascript"></script>
<script src="<%=path %>/js/uuid.js" type="text/javascript"></script>
<SCRIPT type="text/javascript">
var manager, g;
$(document).ready(function(){
$("#leafOpt").click(function(){
$("#urlDom").show();
});
$("#dirOpt").click(function(){
$("#urlDom").hide();
});
//初始化grid
function itemclick(item)
{
alert(item.text);
}
var typeData = [{ val: 'url', text: 'URL' }, { val: 'btn', text: '按钮'}, { val: 'code', text: '分级编码'}];
var rowData = { Rows: []};
g = manager = $("#maingrid").ligerGrid({
columns: [
{ display: '名称', name: 'name', align: 'left', width: 120,editor: { type: 'text' } } ,
{ display: '类型', width: 60, name: 'type',
editor: { type: 'select', data: typeData, valueColumnName: 'val' },
render: function (item)
{
for (var i = 0; i < typeData.length; i++)
{
if (typeData[i]['val'] == item.type)
return typeData[i]['text']
}
}
},
{ display: '值', name: 'value', width: 360, align: 'left',editor: { type: 'text' } }
], sortName: 'name',enabledEdit: true, data: rowData,
onSelectRow: function (rowdata, rowindex)
{
$("#txtrowindex").val(rowindex);
},
onBeforeEdit: onBeforeEdit, onBeforeSubmitEdit: onBeforeSubmitEdit,onAfterEdit: onAfterEdit,
width: '98%', height: '350', usePager: false, clickToEdit: true, checkbox: true
});
});
function deleteRow()
{
g.deleteSelectedRow();
}
function addNewRow()
{
g.addRow({
id : 0,
name:'',
type:'url',
value:''
});
}
//设置name前缀
function onBeforeEdit(e)
{
var data = manager.getData(); return true;
}
//限制年龄
function onBeforeSubmitEdit(e)
{
if (e.columnname == "Age")
{
if (e.value < 20 || e.value > 30) return false;
}
return true;
}
//编辑后事件
function onAfterEdit(e)
{
//当切换类型时，自动填充名称前缀
//alert(JSON.stringify(e.record));
//alert("after, e.column: "+JSON.stringify(e.column));
if(e.column.name=="type") {
var data = manager.getData();
var d = data[e.rowindex];
var name = '';
if(d.type=="url")
name="url";
else if(d.type=="code")
name="code_";
else if(d.type=="btn")
name="btn_";
g.updateCell('name', name, e.record);
}
//当名称修改后，校验前缀是否与类型匹配
if (e.column.name == "name")
{
var d = e.record;
var cellObj = g.getCellObj(d, e.column);
//var name = d[e.column.name];
var name = $(cellObj).text();
if(name.length<1)
return true;
if(d.type=="url" && name.indexOf(d.type)!=0) {
alert('你刚才编辑的值录入不正确！（类型为URL时，名称必须以url开头（小写））');
//cellObj.focus();
//g.setCellEditing(d, e.column, editing);
return false;
} else if(d.type=="code" && name.indexOf(d.type)!=0) {
alert('你刚才编辑的值录入不正确！（类型为分级编码时，名称必须以code_开头（小写））');
//g.setCellEditing(d, e.column, editing);
return false;
} else if(d.type=="url" && name.indexOf(d.type)!=0) {
alert('你刚才编辑的值录入不正确！（类型为按钮时，名称必须以btn_开头（小写））');
//g.setCellEditing(d, e.column, editing);
return false;
}
}
return true;
}
</script>
</head>
<body>
<table>
<tr>
<td colspan=2>
<input type=radio id="dirOpt" name="typeOpt" checked><label for="dirOpt">目录节点</label>
<input type=radio id="leafOpt" name="typeOpt"><label for="leafOpt">叶子节点</label>
</td>
</tr>
<tr>
<td><label>节点名称</label></td>
<td><input type="text" id="nodeNameTxt" size="40"></td>
</tr>
<tr id="urlDom" style="display:none">
<td><label>叶子url</label></td>
<td><input type="text" id="urlTxt" size="70"></td>
</tr>
<tr>
<td><label>分级编码</label></td>
<td><input type="text" border="0" style="border:0;" readonly id="nodeCodeTxt" size="40"></td>
</tr>
</table>
<div>
<a class="l-button" style="width:60px;float:left; margin-left:10px;" onclick="addNewRow()">新增行</a>
<a class="l-button" style="width:60px;float:left; margin-left:10px;" onclick="deleteRow()">删除行</a>
</div>
<div id="maingrid"></div>
</body>
</html>