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获取IP地址:request.getRemoteAddr()注意
在JSP里,获取客户端的IP地址的方法是:request.getRemoteAddr() ,这种方法在大部分情况下都是有效的.但是在通过了Apache,Squid等反向代理软件就不能获取到客户 ...
读写锁：ReadWriteLock
http://my.oschina.net/20076678/blog/173165 一.在JDK文档中关于读写锁的相关说明 ReadWriteLock 维护了一对相关的锁 ,一个用于只读操作, ...
集合类 Contains 方法深入详解与接口的实例
.Net 相等性:集合类 Contains 方法深入详解 http://www.cnblogs.com/ldp615/archive/2009/09/05/1560791.html 1.接口的概念及 ...
Gulp 学习总结
Gulp 自动化工具开发非常方便,便于上手,值得使用. 一.Gulp安装 gulp是基于NodeJS运行的,所以需要想安装NodeJS. http://nodejs.org/download/ 安装 ...
Flex 拾色器改变背景
package { import flash.display.*; import flash.geom.*; import flash.utils.*; import mx.core.EdgeMe ...
CloudStack采用spring加载bean(cloud-framework-spring-module模块)
CloudStackContextLoaderListener /* * Licensed to the Apache Software Foundation (ASF) under one * or ...
arm_cm4.c关于kinetis的修改
/***********************************************************************/ /* * Initialize the NVIC t ...
试读《JavaScript语言精髓与编程实践》
有幸看到iteye的活动,有幸读到<JavaScript语言精髓与编程实践_第2版>的试读版本,希望更有幸能完整的读到此书. 说来读这本书的冲动,来得很诡异,写一篇读后感,赢一本书,其实奖 ...
IOS 7 Study - UIDatePicker
Picking the Date and Time with UIDatePicker effect: 1. declaring a property of type UIDatePicker #im ...
(转)用AGG实现高质量图形输出（二）
本文上接<用AGG实现高质量图形输出(一)>,分别介绍了AGG显示流程中的各个环节. 上次讲了AGG的显示原理并举了一个简单的例子,这一篇文章开始讲AGG工作流程里的每个环节.为了方便对照 ...

ligerui grid行编辑示例

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

随机推荐

热门专题