ligerui grid行编辑示例

最新推荐文章于 2020-12-30 14:26:11 发布

weixin_34023982

最新推荐文章于 2020-12-30 14:26:11 发布

阅读量299

点赞数

文章标签： json javascript ViewUI

原文链接：https://my.oschina.net/webas/blog/108822

版权

为什么80%的码农都做不了架构师？>>>

ligerui grid行编辑示例，具备新增行、删除行功能，可在修改某个cell之后，如果录入错误，可以提醒用户。

<%@ 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>

转载于:https://my.oschina.net/webas/blog/108822