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

ligerui grid行编辑示例的更多相关文章

  1. Grid行编辑插件

    //操作列不显示应该就是autoLoad的问题.         Ext.onReady(function () {             Ext.BLANK_IMAGE_URL = "E ...

  2. 关于ligerui grid 行内编辑 combobox 只能选择的问题

    这个貌似是天然的不支持,修复方案,在ligerGridOrd.js中添加一行代码,如下,跟了一下午的源码,发现在这里的时候,options中只保留了combobox中的一部分属性,所以可能combob ...

  3. EXTJS 4.2 资料 控件之Grid 行编辑绑定下拉框，并点一次触发一次事件

    主要代码: { header: '属性值', dataIndex: 'PropertyValueName', width: 130, editor: new Ext.form.field.ComboB ...

  4. Ligerui Grid组件--学生信息列表

    一.目录 1.多层架构+MVC+EF+AUTOFAC+AUTOMAPPER: 2.MVC中验证码的实现(经常用,记录备用) 3.Ligerui首页的快速搭建 4.Ligerui Grid组件--学生信 ...

  5. 扩展Jquery方法创建LigerUI Grid

    ///** //*封装jquery get请求ajax //*author:叶明龙 //*time:2012-12-10 //*/ function getAjax(url, para, fn) { ...

  6. jqGrid行编辑配置，方法，事件

    行编辑可以在行修改后更新数据,如下图所示 用户用鼠标点击选择一行,jqGrid将可编辑的字段转换为数据输入单元,如上面图所示.不可编辑的列,如id,不会转为可输入单元,而是保持不变.可以通过配置col ...

  7. jqgrid 使用自带的行编辑

    上篇jqgrid 单击行启用行编辑,切换行保存原编辑行 本篇,说说使用jqgrid自带的行编辑 1)设置需要编辑的列  editable: true colModel: [ { label: '字段编 ...

  8. grid 布局 属性示例

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  9. EXTJS4.0 grid 可编辑模式 配置

    首先配置这个参数 plugins:[//插件 Ext.create("Ext.grid.plugin.CellEditing",{ clicksToEdit:1//单元格 点一下就 ...

随机推荐

  1. chrome emulator use-agent 设置 chrom模拟手机客户端

    谷歌升级以后,发现找不到use-agent设置了 在Element 下点击ESC 出现console,再点击Emulation就出现了

  2. C#中的Collection 2

    Core Generic interface IEnumerable<T>:you can interate my elemnts, no need to know the count, ...

  3. （剑指Offer）面试题23：从上到下打印二叉树

    题目: 从上往下打印出二叉树的每个节点,同层节点从左至右打印. 思路: 很明显,这是一个广度优先遍历. 需要一个队列容器来保存结点,具体操作: 1.将根结点压入队列中,并打印根结点:如果根结点有子结点 ...

  4. OSX apache vhost 配置多站点时403错误解决方法

    到 /etc/apache2/httpd.conf 这个文件修改下面的路径就好了 DocumentRoot "/Users/wujinhang/workspace/"<Dir ...

  5. C++中C/C++格式化输出

    对于不同的机器,一此格式化输出的函数经常会得不到正确的输出,比方小端上的程序在大端上执行等,另外,在日常程序开发时,也会经常被这种小问题而困扰非常久.终于发现是她的问题.不免有点叹息,以下对print ...

  6. Codeforces Round #339 (Div. 1) A. Peter and Snow Blower 计算几何

    A. Peter and Snow Blower 题目连接: http://www.codeforces.com/contest/613/problem/A Description Peter got ...

  7. 设备\Device\Harddisk1\DR1 有一个不对的区块

    近期遇到一个windows上的Oracle DB system表空间有问题.然后第一个反应就是查看windows的日志查看器,确实发现了报错: 设备\Device\Harddisk1\DR1 有一个不 ...

  8. GlusterFS创建volume失败的解决方法（* or a prefix of it is already part of a volume）

    问题描写叙述: 之前已经创建了一个replicated的volume gv0,replica=2,两个文件夹为:/test/data1和/test/data2,之后发现这两个文件夹不太合适,想在/te ...

  9. Nginx_handler模块发开（hello模块结构解析）

    声明:请在文章页面明显位置给出原文连接 http://www.cnblogs.com/paulweihan/p/4654173.html,否则保留追究法律责任的权利. 近期查了非常多资料.入门的样例都 ...

  10. 通过百度地图API将百度坐标转换成GPS经纬度

    百度地图API链接:http://developer.baidu.com/map/index.php?title=webapi/guide/changeposition 百度地图API中,有GPS坐标 ...