[ligerUI] grid行編輯示例

時間 2019-11-15
標籤 ligerui grid 編輯示例简体版
原文原文鏈接
ligerui grid行編輯示例，具有新增行、刪除行功能，可在修改某個cell以後，若是錄入錯誤，能夠提醒用戶。javascript
<%@ 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>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。