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基础知识（较长）
1.抽象: 抽象就是忽略一个主题中与当前目标无关的那些方面,以便更充分地注意与当前目标有关的方面.抽象并不打算了解全部问题,而只是选择其中的一部分,暂时不用部分细节.抽象包括两个方面,一是过程抽象, ...
ASP.NET服务器控件在IE10浏览器（非兼容模式）下报脚本错误的可能解决办法
关于IE10出现LinkButton点击无效的情况: 一般高配置的系统如Win7旗舰版SP1系统不会出现这种情况,针对家庭普通版和专业版的用户通过测试都有这种情况,对于开发人员要解决不同 ...
PPAS上运行pg_dump经过
目前我有两台机器, 分别已经安装了PPAS9.1,安装后建立了OS系统用户enterprisedb和数据库用户enterprisedb. 机器1:master 192.168.10.88 机器2: ...
Parallel.ForEach ， ThreadPool.QueueUserWorkItem
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
巧妙使用Jquery 改变元素的 onclick 事件
需要点击图片将套组发布, 页面代码: <img width="20px" src=" <s:property value="IMAGES_PATH& ...
Codeforces Round #188 (Div. 1) B. Ants 暴力
B. Ants Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/317/problem/B Des ...
使用ASP.NET操作IIS7中使用应用程序
使用ASP.NET操作IIS7中使用应用程序在最新发布的启明星Portal里,增加了安装程序,下面说一下.NET对IIS7操作.IIS7的操作和IIS5/6有很大的不同,在IIS7里增加了 Mi ...
h5-4 canvas
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
vm内核参数优化设置
http://www.cnblogs.com/wjoyxt/archive/2014/06/08/3777042.html (1)vm.overcommit_memory 执行grep -i com ...
如何在HTML5 图片预览
HTML5的 File API允许浏览器访问本地文件系统,借助它我们可以实现以前无法实现的本地图片预览功能. 先介绍下该API实现了那些接口: 1.Blob接口,表示原始的二进制数据,通过它可以访问到 ...

ligerui grid行编辑示例

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

随机推荐

热门专题