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;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行编辑示例的更多相关文章

Grid行编辑插件
//操作列不显示应该就是autoLoad的问题. Ext.onReady(function () { Ext.BLANK_IMAGE_URL = "E ...
关于ligerui grid 行内编辑 combobox 只能选择的问题
这个貌似是天然的不支持,修复方案,在ligerGridOrd.js中添加一行代码,如下,跟了一下午的源码,发现在这里的时候,options中只保留了combobox中的一部分属性,所以可能combob ...
EXTJS 4.2 资料控件之Grid 行编辑绑定下拉框，并点一次触发一次事件
主要代码: { header: '属性值', dataIndex: 'PropertyValueName', width: 130, editor: new Ext.form.field.ComboB ...
Ligerui Grid组件--学生信息列表
一.目录 1.多层架构+MVC+EF+AUTOFAC+AUTOMAPPER: 2.MVC中验证码的实现(经常用,记录备用) 3.Ligerui首页的快速搭建 4.Ligerui Grid组件--学生信 ...
扩展Jquery方法创建LigerUI Grid
///** //*封装jquery get请求ajax //*author:叶明龙 //*time:2012-12-10 //*/ function getAjax(url, para, fn) { ...
jqGrid行编辑配置，方法，事件
行编辑可以在行修改后更新数据,如下图所示用户用鼠标点击选择一行,jqGrid将可编辑的字段转换为数据输入单元,如上面图所示.不可编辑的列,如id,不会转为可输入单元,而是保持不变.可以通过配置col ...
jqgrid 使用自带的行编辑
上篇jqgrid 单击行启用行编辑,切换行保存原编辑行本篇,说说使用jqgrid自带的行编辑 1)设置需要编辑的列 editable: true colModel: [ { label: '字段编 ...
grid 布局属性示例
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
EXTJS4.0 grid 可编辑模式配置
首先配置这个参数 plugins:[//插件 Ext.create("Ext.grid.plugin.CellEditing",{ clicksToEdit:1//单元格点一下就 ...

随机推荐

C和设计原则
---DO NOT REPEAT YOURSELF--- 建设性的懒惰,是程序员的第一美德.最简单的懒惰就是不要重复自己,简单到一个命名规则,例如C语言中: int osip_list_init (o ...
妙用缓存调用链实现JS方法的重载
来自于我的博客http://sweets.cf/,转载注明出处 1.什么是方法重载方法重载是指在一个类中定义多个同名的方法,但要求每个方法具有不同的参数的类型或参数的个数. 简而言之就是:方法重载就 ...
pat 1055 区间前k个
http://pat.zju.edu.cn/contests/pat-a-practise/1055 第二组数据比较大,如果单纯排序直接检索会超时,因为每次都是对所有数据进行遍历. N/200=500 ...
CMSIS RTOS -- embOS segger
#ifndef __CMSIS_OS_H__ #define __CMSIS_OS_H__ #include <stdint.h> #include <stddef.h> #i ...
ISO13485给企业带来的益处
1.ISO13485变强制性认证,日益受到欧美和中国政府机构的重视,有利于消除国际贸易中的技术壁垒,是进入国际市场的通行证: 2.提高和改善企业的管理水平,增加企业的知名度: 3.提高和保证产品的质量 ...
Codeforces Round #310 (Div. 1) B. Case of Fugitive set
B. Case of Fugitive Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/555/p ...
【工作记录】c#操作win7注册表
这里讲一 C# 小列子(高手请绕过此地! ), 我们平时都是在xp开发比较多...不过现在很多开发人员也在win7下开发了. 下面是在 LocalMachine 下的一下注册表操作 ,就不详说了 p ...
50个Android开发人员必备UI效果源码[转载]
50个Android开发人员必备UI效果源码[转载] http://blog.csdn.net/qq1059458376/article/details/8145497 Android 仿微信之主页面 ...
黑客破译android开发代码真就那么简单？
很多程序员辛辛苦苦开发出的android开发代码,很容易就被黑客翻译了. Google似乎也发现了这个问题,从SDK2.3开始我们可以看到在android-sdk-windows\tools\下面多了 ...
[MySQL登录错误] ERROR1045 (28000): Access denied for user 'omonroy'@'20.112.251.19' (using password:YES)
收到美国那边同事carl的call说用户登录不上去了,不过2个礼拜前他还用的好好的,他给我发email了,他有急事需要处理麻烦我记尽快协助,他在email有截取错误信息: root@xxxxx:/ho ...

ligerui grid行编辑示例

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

随机推荐

热门专题