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//单元格点一下就 ...

随机推荐

Java中返回参数值的几种状态
Java 中无参无返回值方法的使用第一步,定义方法例如:下面代码定义了一个方法名为 show ,没有参数,且没有返回值的方法,执行的操作为输出 " welcome to imooc. & ...
Labeled ContentControl & LabeledControl【项目】
LabeledTextBoxControl: C#定义 using System; using System.Collections.Generic; using System.Linq; using ...
ADT下开发环境的配置--个人配置啦 Eclipse Color Themes
一. Eclipse Color Themes的安装首先这个ADT没有Marketplace Client 需要装一个, 节选自: http://blog.csdn.net/liu37226700 ...
ao的编辑操作
自从10.0以后,ArcMap的编辑界面发生了变化,原本的“目标图层”和“编辑任务”不见了,取而代之的是“要素构造”窗口,里面融合了目标图层和编辑任务功能.查看sdk发现,多了几个接口,前面已经讲过. ...
KMP算法初探
[edit by xingoo] kmp算法其实就是一种改进的字符串匹配算法.复杂度可以达到O(n+m),n是参考字符串长度,m是匹配字符串长度. 传统的算法,就是匹配字符串与参考字符串挨个比较,如果 ...
vc6.0 通过ADO(udl)连接sql 2008
转载声明:本文转自http://blog.sina.com.cn/s/blog_7328b9dd0100pkbw.html茗之的博客首先声明:本文是针对vc与sql菜鸟的,高人请让路. 本文讲解 ...
uva301 - Transportation
Transportation Ruratania is just entering capitalism and is establishing new enterprising activiti ...
为DELL inspiron 14R安装CentOS X64 6.4
今天接到一个任务,为DELL inspiron 14R安装CentOS X64 6.4,本以为这是小菜一碟,不算个啥,大大小小安装LINUX CENTOS 不下上百次了,还怕这个?结果,各种碰壁... ...
[转]iOS应用性能调优的25个建议和技巧
写在前面本文来自iOS Tutorial Team 的 Marcelo Fabri,他是Movile的一名 iOS 程序员.这是他的个人网站:http://www.marcelofabri.com/ ...
VS2010: Microsoft.TeamFoundation.PowerTools.CheckinPolicies.ChangesetComments 未注冊
VS2010 缺少Team Foundation Server Power Tools 下载地址: http://visualstudiogallery.msdn.microsoft.com/c255 ...

ligerui grid行编辑示例

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

随机推荐

热门专题