[ligerUI] grid行编辑示例

最新推荐文章于 2021-03-16 20:40:38 发布
最新推荐文章于 2021-03-16 20:40:38 发布
阅读量204 收藏
点赞数
文章标签： json javascript ViewUI
原文链接：http://www.cnblogs.com/jqmtony/p/4097121.html
版权

ligerui grid行编辑示例，具备新增行、删除行功能，可在修改某个cell之后，如果录入错误，可以提醒用户。

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

转载于:https://www.cnblogs.com/jqmtony/p/4097121.html

Just do it
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ligerui 表格中设置单元格不可编辑，添加行，删除行
cc_yy_zh的博客
09-14 5095
一、需求：开发个表格grid用来显示维护线路段，出发地和目的地已经确定，需要维护中间路段 二、解析: 1、既然出发地和目的地已经确定，那么出发地和目的地是不可以编辑的，因为附带有其他字段是可以编辑的，所以不可以直接操作行 2、添加的线路段需要在目的地之前显示 三、开发 上网查了一些资料，还是没有头绪，想了好久终于还是实现了 1、点击添加时在目的地之前添加一行toolbar : {
ligerui之gird
07-09
除了以上提到的功能，LigerUI Grid还支持分页、排序、过滤、编辑、拖放列等功能，这些都为开发者提供了强大的数据管理能力。在实际开发中，我们需要结合具体需求，灵活运用LigerUI提供的API和配置选项，以实现更复杂...
LigerUi之Grid使用详解（二）——数据编辑
weixin_33830216的博客
01-22 995
一、问题概述 　　在开发web信息管理系统时，使用Web前端框架可以帮助我们快速搭建一组风格统一的界面效果，而且能够解决大多数浏览器兼容问题，提升开发效率。所以上一篇文章为大家介绍了LigerGrid的显示数据的基本用法（传送门：http://www.cnblogs.com/jerehedu/p/4218560.html ），本次为大家继续介绍Grid的其他用法，比如使用...
ligerui demo php,ligerui grid行编辑示例
weixin_39757265的博客
03-16 203
ligerui grid行编辑示例，具备新增行、删除行功能，可在修改某个cell之后，如果录入错误，可以提醒用户。String path = request.getContextPath();%> ZTREE DEMO - Simple Datavar contextpath = "";.myul li{float:left;width:100px;display:inline;}var m...
ligerUI实现grid同一列根据不同的值编辑时呈现不同类型的编辑器
一世为白
08-27 1653
遇到一个恶心的需求是ligerGrid点击列的时候根据另外一个列的值变成不同的输入框 有可能是文板框，也有可能是下拉框 function loadDataGridCopy(){ //初始化dataGrid if (!dataGridCopy) { dataGridCopy = $(".org-data").zoeGrid({ columns: [
jquery ligerui 一个grid数据添加到另一个grid并删除本条记录错误
kiis8的博客
09-21 385
程序要实现使用jquery ligerui选择一个grid表格中的数据，点击“添加”将本条数据添加到别一个grid表格中 两个grid表格的数据列相同我用本地v1.1.5的环境写了如下例子 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm...
ligerui-LigerUI-V1.2.5.rar
07-13
- **表格（Grid）**：LigerUI的表格组件支持动态加载、分页、排序、过滤、自定义列模板等功能，方便展示和操作大量数据。 - **表单（Form）**：表单组件提供了丰富的验证规则和联动效果，能够快速构建交互性强的...
jq ligerUI
01-15
1. **丰富的组件库**：LigerUI提供了众多UI组件，如表格（Grid）、表单（Form）、对话框（Dialog）、菜单（Menu）、按钮（Button）、下拉选择（ComboBox）、日期选择器（DatePicker）、滑块（Slider）等，这些组件...
LigerUI之Grid使用详解(一)——显示数据
11-09
LigerUI的Grid组件还有许多其他功能，如行操作、自定义模板、编辑模式等。你可以通过配置更多选项来扩展Grid的功能。例如，启用行编辑模式： ```javascript $("#gridContainer").ligerGrid({ columns: [...], ...
jQuery LigerUI V1.3.3.rar.rar
06-07
2. **组件丰富**：LigerUI提供了众多UI组件，如表格（Grid）、表单（Form）、下拉框（ComboBox）、日期选择器（DatePicker）、对话框（Dialog）、分页（Pager）等，这些都是构建复杂Web应用的必备工具。 3. **主题...
ligerUI总结—— grid表格(基础篇)
whdmxl991的专栏
01-04 4311
一、配置column 表格显示了多少个列,列宽，列单元格要显示的内容都是由columns属性配置，下面是column的配置参数： 代码如下:{ display: '序号', //表头列显示的文本,支持html //表头内容自定义函数 headerRender: function (column) { return "" + column.display + ""; }, name: 'i
ligerui编辑
u013373006的博客
12-01 1004
html> lang="en"> {include file="public/head" /} style="padding:10px"> id="form1"> {$data.spec_item}--> type="text/javascript"> var fields=[ { display: "规格编码", name: "spec_code",
LigerUi中表（Grid）控件的相关属性笔记（持续添加中）
wangchaoqi1985的博客
06-08 1338
// ========================================= 【每一项的TYPE类型】 { display: '主键', name: 'id',
LigerUI行错位问题
LaOngDaoxing的博客
07-23 850
插件版本jQuery LigerUI V1.3.3 grid = $("#qiyeguanli_maingrid").ligerGrid({ ... fixedCellHeight:false,//是否固定单元格的高度；默认true isScroll:true,//设置为false时将不会显示滚动条，高度自适应；默认true frozen:false,//冻结列状...
Ligerui表格基本操作(五）
u012962099的专栏
01-25 2840
Ligerui表格基本操作之表格编辑，搜索                                                     var dept = [{ deptname: "01", v: "人力资源部" }, { deptname: "02", v: "行政部" },
Kindeditor在LigerUI中无法获得焦点
shifanzhang的博客
08-07 561
项目中需要用到LigerUI的弹窗然后富文本用的是Kindeditor插件，之前一直有个问题就是，Kindeditor无法获得焦点，只能是在fullscreen的情况下获取焦点。在网上找了半天都是JQuery UI的方法，和我遇到的情况不一样。于是就靠自己琢磨，现在弄出来了，只需要把Kindeditor的初始化部分放到$.ligerDialog.open方法的后面就可以了。 以下为调整后的代码：
LigerUi中表（Grid）控件的相关属性笔记
weixin_30360497的博客
09-05 368
http://blog.csdn.net/dxnn520/article/details/8216560 // ========================================= 【每一项的TYPE类型】{ display: '主键', name: 'id', width: 50, type: 'int' }, // 整型{ display: '生日', name: 'bi...
Ligerui表格基本操作(二)
u012962099的专栏
11-03 1703
Ligerui表格基本操作之合并单元格，获取选中项及设置默认选中项                                     var col = [{ display: "姓名", name: "Name" },         { display: "年龄", name: "Age" },         { display:
【LigerUI实战】Grid弹出编辑popup
weixin_30682127的博客
11-15 215
最近为分公司的项目做外援，做起了全栈的活。被公司自研架构磨灭的几乎忘掉了其他技能，正好新项目决定重新搭个架构，与同事们讨论过后，决定Spring+MyBatis+SpringMVC+CXF+LigerUI。除了Spring比较熟悉外，其他的还是新接触，不过现在来看，MyBatis和SpringMVC还真是简单易学。不过我的前端知识很有限，干起活来还真是不顺手，所以决定把LigerUI中遇到...
Ligerui下拉框可编辑
最新发布
05-23
Ligerui提供了可编辑下拉框组件，可以通过设置editable属性为true来实现下拉框的可编辑功能。同时，还可以设置selectBoxWidth属性来控制下拉框的宽度，以适应不同的内容。 以下是一个简单的示例代码： ``` $...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值