zoukankan      html  css  js  c++  java
  • ligerui grid行编辑示例

    <%@ 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;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',  120,editor: { type: 'text' } } ,
                    { display: '类型',  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',  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,
                     '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="60px;float:left; margin-left:10px;" onclick="addNewRow()">新增行</a>
        <a class="l-button" style="60px;float:left; margin-left:10px;" onclick="deleteRow()">删除行</a>
        </div>
        <div id="maingrid"></div>
    </body>
    </html>
  • 相关阅读:
    用ProFTPD构建FTP服务器
    Js数组里剔除指定的元素(不是指定的位置)
    JS跨域设置和取Cookie
    ajax test
    js下判断 iframe 是否加载完成的完美方法
    使用div模拟出frameset效果
    js中call与apply用法
    phpstorm 快捷键
    JQuery中 数组与字符串(过滤,排序,拆分,合并)
    基于 Apache 在本地配置多个虚拟主机
  • 原文地址:https://www.cnblogs.com/xuyuanjia/p/5720177.html
Copyright © 2011-2022 走看看