效果图
代码
<%@ page import="org.nome.util.StringUtil" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@include file="/static/common/ace14commonJsForKendo.jsp"%>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="splitterBody">
<section id="splitterSection">
<nav class="justify-content-center align-items-center" id="splitterNav">
<div class="card w-100" style="border: none;">
<h6 class="card-header" style="min-height:53px;">
<span style="font-size: 16px; display: block; padding-top: 4px;">应用列表</span>
</h6>
<div class="card-body" >
<p>
<span class="k-textbox k-space-left w-100">
<input id="keywords" name="keywords" type="text" placeholder="关键字搜索"/>
<a class="k-icon k-i-search ml-1" href="javascript:;"></a>
</span>
</p>
<div id="treeView"></div>
</div>
</div>
</nav>
<main class="justify-content-center align-items-center" id="splitterMain">
<div class="card-body" style="padding: 0px; margin-left:2px;">
<div id="treeDetail"></div>
</div>
</main>
</section>
</div>
<script id="editTemplate" type="text/x-kendo-template">
<div class="card">
<h6 class="card-header" style="min-height:50px;">
<table style="width: 100%;">
<tr>
<td style="width: 50%; text-align: left; vertical-align: top;">
<span class="add hide" style="font-size: 16px; display: block; padding-top: 0px;">新增</span>
<span class="edit hide" style="font-size: 16px;display: block; padding-top: 0px;">编辑</span>
<button class="k-button k-button-icontext theme-m-box view" onclick="createTree();"><span class="k-icon k-i-add"></span>新增</button>
</td>
<td style="width: 50%; text-align: right;">
<button class="k-button k-button-icontext k-state-selected add hide" onclick="saveCreateTree();"><span class="k-icon k-i-save"></span>保存</button>
<button class="k-button k-button-icontext k-state-selected edit hide" onclick="saveUpdateTree();"><span class="k-icon k-i-check"></span>更新</button>
<button class="k-button k-button-icontext theme-s-box add edit hide" onclick="cancelTree();"><span class="k-icon k-i-cancel"></span>取消</button>
</td>
</tr>
</table>
</h6>
<div class="card-body">
<form>
<input type="hidden" name="OptType" id="OptType" />
<input type="hidden" name="AREA_ID" id="AREA_ID" value="#= AREA_ID #" />
<input type="hidden" name="CREATE_BY" id="CREATE_BY" />
<input type="hidden" name="ENABLED" id="ENABLED" value="1"/>
<table class="table table-bordered">
<tr>
<td class="tdgray wd-150 wd-left">应用领域名称：</td>
<td>
<div class="mt-1 view">#= AREA_NAME #</div>
<input class="k-textbox w-100 add edit hide" name="AREA_NAME" type="text" value="#= AREA_NAME #" required data-required-msg="请输入应用领域名称">
<span class="k-invalid-msg" data-for="AREA_NAME"></span>
</td>
</tr>
<tr>
<td class="tdgray wd-150 wd-left">应用领域编码：</td>
<td>
<div class="mt-1 view">#= AREA_CODE #</div>
<input class="k-textbox w-90 add edit hide" name="AREA_CODE" type="text" value="#= AREA_CODE #">
<button type="button" class="k-button k-button-icontext w-9 theme-m-box hide add edit" onclick="generateCode();">自动生成</button>
</td>
</tr>
<tr>
<td class="tdgray wd-150 wd-left">访问路径：</td>
<td>
<div class="mt-1 view">#= AREA_DOMAIN #</div>
<input class="k-textbox w-100 add edit hide" name="AREA_DOMAIN" type="text" value="#= AREA_DOMAIN #">
</td>
</tr>
<tr>
<td class="tdgray wd-150 wd-left">排序：</td>
<td>
<div class="mt-1 view">#= AREA_ORDER #</div>
<input class="k-textbox w-100 add edit hide" name="AREA_ORDER" type="text" value="#= AREA_ORDER #" checkexpession="NumOrNull" validationMessage="序号不能为空或者非数字"/>
<span data-for="AREA_ORDER" class="k-invalid-msg"></span>
</td>
</tr>
<tr>
<td class="tdgray wd-150 wd-left">备注说明：</td>
<td>
<div class="mt-1 view">#= REMARKS #</div>
<input class="k-textbox w-100 add edit hide" name="REMARKS" type="text" value="#= REMARKS #">
</td>
</tr>
</table>
</form>
</div>
<div class="card-footer text-center">
<button class="k-button k-button-icontext k-state-selected view" onclick="updateTree();"><span class="k-icon k-i-edit"></span>编辑当前节点</button>
<button class="k-button k-button-icontext theme-s-box view" onclick="destroyTree('#= AREA_ID #');"><span class="k-icon k-i-close"></span>删除当前节点</button>
</div>
</div>
</script>
<script>
function defUI(){
var masterMap = masterMap = {};
masterMap.AREA_ID = '';
masterMap.AREA_NAME = '';
masterMap.AREA_CODE = '';
masterMap.AREA_DOMAIN = '';
masterMap.REMARKS = '';
masterMap.AREA_ORDER = '';
masterMap.ENABLED = '';
masterMap.CREATE_BY = _userLoginName;
$('#treeDetail').html(kendo.template($('#editTemplate').html())(masterMap));
cancelTree();
$(".card-footer").hide();
}
function generateCode(){
var name = $("[name='AREA_NAME']").val();
if(name == '') return;
//name = encodeURI(name);
name = encodeURI(name);
$.ajax({
url : '${basePath}appResource/getCodeByName.do',
data : {name : name},
cache : false,
type : 'POST',
dataType : 'json',
success:function(data){
$("[name='AREA_CODE']").val(data.code);
},
error:function(e){
alertMsg(e, 'warning');
}
});
}
var treeView;
$(function(){
defUI();
$('#splitterBody').height($('html').height()).kendoSplitter({
orientation: 'vertical',
panes: [
{
collapsible: true,
resizable: false,
scrollable: false,
size: '0%'
},
{
resizable: false,
size: '100%'
},
{
collapsible: true,
resizable: false,
scrollable: false,
size: '0%'
}
]
});
$('#splitterSection').kendoSplitter({
panes: [
{
collapsible: true,
max: '30%',
min: '10%',
size: '20%'
},
{
size: '70%'
}
]
});
// 获取数据源生成树形
treeView = $('#treeView').kendoTreeView({
dataSource: {
transport: {
read: function (options) {
$.post('${basePath}appArea/list.do',function(data){
data.rows = new NewTreeHelper(data.rows).dataTransferer();
options.success(data);
}) ;
}
},
schema: {
data: 'rows',
model: {
id: 'ID',
children: 'children'
}
}
},
template:
'# var node = JSON.stringify(item).replace(/\\"/g, "\'"); #' +
'<a class="k-link" href="javascript:editTree(#= node #);">#= item.text #</a>'
// ,dataBound: function () {
// if ($('#treeView a.k-state-selected').length === 1) {
// location.href = $('#treeView a.k-state-selected').attr('href');
// } else if ($('#treeView span.k-state-selected').length === 1) {
// location.href = $('#treeView span.k-state-selected a').attr('href');
// }
// }
}).data('kendoTreeView');
// 关键字搜索
$('#keywords').keyup(function () {
treeView.expand($('#treeView li'));
if ($(this).val() !== '') {
$('#treeView li').hide();
$('#treeView .k-in:contains(' + $(this).val() + ')').each(function () {
$(this).parents('li').show();
});
} else {
$('#treeView li').show();
}
});
});
// 增保存
function saveCreateTree() {
if ($('#treeDetail form').kendoValidator($.fn.ValidateConfig).data('kendoValidator').validate()) {
$("#AREA_ID").val("");
var form=$('#treeDetail form').serializeObject();
$.post('${basePath}appArea/save.do',form,function(data){
alertMsg(' 新增成功', 'success');
refreshTree();
});
}
}
// 改
function updateTree() {
$("#OptType").val("Edit");
$('#treeDetail .view').hide();
$('#treeDetail .add').hide();
$('#treeDetail .edit').show();
$('#treeDetail input.add').prop('disabled', true);
$('#treeDetail input.edit').prop('disabled', false);
$(".card-footer").hide();
}
// 删
function destroyTree(id) {
confirmMsg('删除确认', ' 你确定要删除吗？', 'question', function () {
$.post("${basePath}appArea/delete.do",{areaId : id},function (){
refreshTree();
defUI();
});
});
}
// 改保存
function saveUpdateTree() {
if ($('#treeDetail form').kendoValidator($.fn.ValidateConfig).data('kendoValidator').validate()) {
var form=$('#treeDetail form').serializeObject();
$.post('${basePath}appArea/save.do',form,function(data){
alertMsg(' 修改成功', 'success');
refreshTree();
});
}
}
// 取消
function cancelTree() {
$('#treeDetail .add').hide();
$('#treeDetail .edit').hide();
$('#treeDetail .view').show();
$(".card-footer").show();
}
// 增删改查
function editTree(node) {
//查询表单信息
$.ajax({
url :'${basePath}appArea/edit.do',
type : "POST",
cache : false,
dataType : "json",
data : {
areaId : node.ID
},
success:function(data) {
var masterMap = data.masterMap;
if(masterMap == null){
masterMap = {};
masterMap.AREA_ID = '';
masterMap.AREA_ORDER = '1';
}
masterMap.ENABLED = '1';
masterMap.CREATE_BY = _userLoginName;
$('#treeDetail').html(kendo.template($('#editTemplate').html())(masterMap));
cancelTree();
}
});
}
// 增
function createTree() {
$(".card-footer").show();
$("#OptType").val("Add");
$('#treeDetail .view').hide();
$('#treeDetail .edit').hide();
$('#treeDetail .add').show();
$('#treeDetail input.edit').prop('disabled', true);
$('#treeDetail input.add').prop('disabled', false);
$(".card-footer").hide();
}
</script>
</body>
</html>
自定义验证
//配置验证
$.fn.ValidateConfig={
rules: {
isNotNull: function (input) {
if (input.is("[checkexpession=NotNull]")) {
var value = input.val();
return $.trim(value)!="";
}
return true;
},
isNum: function (input) {
if (input.is("[checkexpession=Num]")) {
var value = input.val();
if($.trim(value)==""){
return true;
}
var regex = /^[-+]?\d+$/;
return regex.test($.trim(value));
}
return true;
},
isNumOrNull: function (input) {
if (input.is("[checkexpession=NumOrNull]")) {
debugger;
var value = input.val();
if($.trim(value)==""){
return false;
}
var regex = /^[-+]?\d+$/;
return regex.test($.trim(value));
}
return true;
},
isEmail: function (input) {
if (input.is("[checkexpession=Email]")) {
var value = input.val();
if($.trim(value)==""){
return true;
}
var regex = /^\w{3,}@\w+(\.\w+)+$/;
return regex.test($.trim(value));
}
return true;
},
isEmailOrNull: function (input) {
if (input.is("[checkexpession=EmailOrNull]")) {
var value = input.val();
if($.trim(value)==""){
return false;
}
var regex = /^\w{3,}@\w+(\.\w+)+$/;
return regex.test($.trim(value));
}
return true;
},
isEnglishStr: function (input) {
if (input.is("[checkexpession=EnglishStr]")) {
var value = input.val();
if($.trim(value)==""){
return true;
}
var regex = /^[a-z,A-Z]+$/;
return regex.test($.trim(value));
}
return true;
},
isEnglishStrOrNull: function (input) {
if (input.is("[checkexpession=EnglishStrOrNull]")) {
var value = input.val();
if($.trim(value)==""){
return false;
}
var regex = /^[a-z,A-Z]+$/;
return regex.test($.trim(value));
}
return true;
},
isTelephone: function (input) {
if (input.is("[checkexpession=Telephone]")) {
var value = input.val();
if($.trim(value)==""){
return true;
}
var regex = /^(\d{3,4}\-)?[1-9]\d{6,7}$/;
return regex.test($.trim(value));
}
return true;
},
isTelephoneOrNull: function (input) {
if (input.is("[checkexpession=TelephoneOrNull]")) {
var value = input.val();
if($.trim(value)==""){
return false;
}
var regex = /^(\d{3,4}\-)?[1-9]\d{6,7}$/;
return regex.test($.trim(value));
}
return true;
},
isMobile: function (input) {
if (input.is("[checkexpession=Mobile]")) {
var value = input.val();
if($.trim(value)==""){
return true;
}
var regex = /^(\+\d{2,3}\-)?\d{11}$/;
return regex.test($.trim(value));
}
return true;
},
isMobileOrnull: function (input) {
if (input.is("[checkexpession=MobileOrnull]")) {
var value = input.val();
if($.trim(value)==""){
return false;
}
var regex = /^(\+\d{2,3}\-)?\d{11}$/;
return regex.test($.trim(value));
}
return true;
},
isCKNotNull: function (input) {
if (!input.is('[checkexpession=CKNotNull]')) {
return true;
}
return $('[checkexpession=CKNotNull]').is(':checked');
},
isRDNotNull: function (input) {
if (!input.is('[checkexpession=RDNotNull]')) {
return true;
}
return $('[checkexpession=RDNotNull]').is(':checked');
},
},
messages: {
isNotNull: "{0}不能为空",
isNum: "{0}必须为数字",
isNumOrNull: "{0}不是数字或空",
isEmail: "{0}必须为E-mail格式",
isEmailOrNull: "{0}不是E-mail格式或空",
isEnglishStr: "{0}必须为英文字符串",
isEnglishStrOrNull: "{0}不是英文字符串或空",
isTelephone: "{0}必须为电话格式",
isTelephoneOrNull: "{0}不是电话格式或空",
isMobile: "{0}必须为手机格式",
isMobileOrnull: "{0}不是手机格式或空",
isCKNotNull: "{0}至少选择一项",
isRDNotNull: "{0}请选择",
},
};
1046
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
