浅谈EasyUI中编辑treegrid的方法

主从表，从表是一个treegrid，加载完数据后，点击节点进入编辑状态。

代码如下:

columns : [ [ {
            title : "ID",
            field : "id",
            hidden : true
        }, {
            field : "pid",
            hidden : true
        },  {
            title : "AAA",
            field : "aaa",
            width : 70,
            align : "center",
            halign : "center"
        }, {
            title : "BBB",
            field : "bbb",
            width : 70,
            align : "center",
            halign : "center",
            editor : {
                type : "combobox",
                options : {
                    data : [ {
                        "id" : 0,
                        "text" : "苹果"
                    }, {
                        "id" : 1,
                        "text" : "梨子"
                    } ],
                    valueField : 'id',
                    textField : 'text',
                    editable : false,
                    // required : true,
                    panelHeight : "auto",
                    missingMessage : "请选择水果",
                    onSelect : function(record) {
                        //editingId是进入编辑状态行的id
                        var editors = $('#grid').datagrid('getEditors', $('#editingId').val());
                        if(record.id == 1){//选择梨子
                            var feditor = editors[1];//一行中第二个编辑框
                            //将编辑框设置成必填
                            $(feditor.target).validatebox({required:true});
                            //将编辑框设置成可编辑
                            $(feditor.target).numberbox('enable');
                            var feditor2 = editors[2];//一行中第三个编辑框
                            $(feditor2.target).validatebox({required:true});
                        }else if(record.id == 0){//选择苹果
                            var feditor = editors[1];
                            $(feditor.target).validatebox({required:false});
                            $(feditor.target).validatebox("setValue","");
                            $(feditor.target).numberbox('disable');
                            var feditor2 = editors[2];
                            $(feditor2.target).validatebox({required:false});
                            $(feditor2.target).validatebox("setValue","");
                        }
                    },
                }
            }
        }

开启编辑状态

代码如下:

$('#rulesgrid').treegrid('beginEdit', index);

以上就是本文关于EasyUI中编辑treegrid的方法，希望大家能够喜欢。

赞 (0)

相关推荐

  • 浅谈EasyUI中Treegrid节点的删除

    EasyUI中的删除很简单,一般直接复制粘贴就行. 下面是对树节点的删除. 复制代码 代码如下: // 删除 function removes() {     var rows = ruletreegrid.treegrid('getSelections');     if (rows && rows.length == 1) {         var showmsg = "";         if (rows[0].pid == 0) {            

  • jQuery EasyUI的TreeGrid查询功能实现方法

    jQuery EasyUI的TreeGrid查询功能实现方法

    最近需要实现对treeGrid的查询功能,具体查询界面如下: 可以查询根节点和具体子节点的信息,开始使用EasyUI的TreeGrid的loadData 加载url的方式不能实现查询功能,于是利用异步AJAX查询了一下数据返回后,赋值给变量,然后利用 TreeGrid的loadData加载这个json格式的返回结果实现了对TreeGrid的查询功能,代码如下: function searchROM() { var product = $('#Product').combobox('getValu

  • EasyUI的treegrid组件动态加载数据问题的解决办法

    搜遍了treegrid源码和文档发现treegrid是扩展自datagrid和tree的,不过以往利用datagrid的reload方法加参数的方式加载查询结果数据,可是treegrid却只执行reload不能加载带参数的查询结果,可能是做了限制,如下代码不能加载查询结果: 复制代码 代码如下: <table id='treegrid' class='easyui-treegrid' url='/User/List'></table>$('#treegrid').treegrid(

  • Easyui Treegrid改变默认图标的方法

    Easyui Treegrid改变默认图标的方法

    普通情况下,treegrid的图标是默认的文件夹与文件的形式,如下图: ​​​我们可以在json文本中加入iconCls来改变默认图标,例如样例中: ​{"total":7,"rows":[ {"id":1,"name":"All Tasks","begin":"3/4/2010","end":"3/20/2010","

  • jquery easyui中treegrid用法的简单实例

    jquery easyui中treegrid用法的简单实例

    项目需求如下图,在服务端返回的json数据中,要经过JS处理,添加复选框,并且复选框需响应JS操作.在easyui 的treegrid中,没有找到现成的插件,自己需要修改整理,代码如下 复制代码 代码如下: <table class="easyui-treegrid" style="width:700px;height:250px"  url='control_node_json?group_id=$info[id]&access_node=$_REQ

  • jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍

    扩展自 $.fn.datagrid.defaults,用 $.fn.treegrid.defaults 重写了 defaults. 依赖 datagrid 用法 复制代码 代码如下: <table id="tt"></table> 复制代码 代码如下: $('#tt').treegrid({ url:'treegrid_data.json', treeField:'name', columns:[[ {title:'Task Name',field:'name'

  • EASYUI TREEGRID异步加载数据实现方法

    EASYUI TREEGRID异步加载数据实现方法

    官方提供的treegrid的ex 我给大家贴出来看看吧: 复制代码 代码如下: $(function(){ $('#tt').treegrid({ url:'treegrid_data3.json', onAfterEdit:function(row,changes){ alert(row.name); } }); }) 这个是页面初始化的. 看看他的JSON: 复制代码 代码如下: {"total":117,"rows":[ <SPAN style=&quo

  • Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法

    Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法

    先放个最终的效果图: 然后是代码: html文件: <body> <h1>TreeGrid</h1> <div> <a id="consle" href="#">consle</a> </div> <table id="test" title="Folder Browser" style="width:400px;height:

  • 浅谈EasyUI中编辑treegrid的方法

    主从表,从表是一个treegrid,加载完数据后,点击节点进入编辑状态. 复制代码 代码如下: columns : [ [ {             title : "ID",             field : "id",             hidden : true         }, {             field : "pid",             hidden : true         },  {    

  • 浅谈AngularJS中ng-class的使用方法

    有三种方法: 1.通过$scope绑定(不推荐) 2.通过对象数组绑定 3.通过key/value键值对绑定 实现方法: 1.通过$scope绑定(不推荐): function ctrl($scope) { $scope.className = "selected"; } <div class="{{className}}"></div> 2.通过对象数组绑定: function ctrl($scope) { $scope.isSelecte

  • 浅谈java8中map的新方法--replace

    Map在Java8中新增了两个replace的方法 1.replace(k,v) 在指定的键已经存在并且有与之相关的映射值时才会将指定的键映射到指定的值(新值) 在指定的键不存在时,方法会return回来一个null javadoc的注释解释了该默认值方法的实现的等价Java代码: if (map.containsKey(key)) { return map.put(key, value); } else { return null; } 下面展示的是新方法和JDK8之前的方法比较: /* *

  • 浅谈pandas中Dataframe的查询方法([], loc, iloc, at, iat, ix)

    pandas为我们提供了多种切片方法,而要是不太了解这些方法,就会经常容易混淆.下面举例对这些切片方法进行说明. 数据介绍 先随机生成一组数据: In [5]: rnd_1 = [random.randrange(1,20) for x in xrange(1000)] ...: rnd_2 = [random.randrange(1,20) for x in xrange(1000)] ...: rnd_3 = [random.randrange(1,20) for x in xrange(1

  • 浅谈PHP中的Trait使用方法

    概述 在PHP中有一种代码复用的技术, 因为单继承的问题, 有些公共方法无法在父类中写出, 而 Trait可以应对这种情况, 它可以定义一些复用的方法, 然后在你需要使用的类中将其引入即可. 刚开始的时候给我的感觉就是将trait代码块直接拿到类中的意思, 但后来我发现, 我太天真了. PHP中的Trait用法: 问题 当我第一次使用的时候, 因为之前一直使用抽象类, 或者定义内部对象, 然后调用内部对象中的方法, 所以我当时有了以下几个问题: 1.能否引入多个, 如果可以的话, 同名方法如何处

  • 浅谈JavaScript中的string拥有方法的原因

    引子 我们都知道,JavaScript数据类型分两大类,基本类型(或者称原始类型)和引用类型. 基本类型的值是保存在栈内存中的简单数据段,它们是按值访问的.JS中有五种基本类型:Undefined.Null.Boolean.Number和String. 引用类型的值是保存在堆内存中的对象,它的值是按引用访问的.引用类型主要有Object.Array.Function.RegExp.Date. 对象是拥有属性和方法的,所以我们看到下面这段代码一点也不奇怪. var favs=['鸡蛋','莲蓬']

  • 浅谈SpringBoot中的Bean初始化方法 @PostConstruct

    浅谈SpringBoot中的Bean初始化方法 @PostConstruct

    目录 注解说明 代码示例 注解示例 错误示例 正确示例 SpringBoot @PostConstruct虽好,也要慎用 1 问题的产生 2 案例模拟 3 总结 注解说明 使用注解: @PostConstruct 效果:在Bean初始化之后(构造方法和@Autowired之后)执行指定操作.经常用在将构造方法中的动作延迟. 备注:Bean初始化时候的执行顺序: 构造方法 -> @Autowired -> @PostConstruct 代码示例 注解示例 @Component public cl

  • 浅谈JavaScript中的Math.atan()方法的使用

    此方法返回弧度的反正切.atan方法返回一个在-pi/2和π/2弧度之间的数值. 语法 Math.atan( x ) ; 下面是参数的详细信息: x : 一个数字 返回值: 返回一个数弧度的反正切值 例子: <html> <head> <title>JavaScript Math atan() Method</title> </head> <body> <script type="text/javascript&quo

  • 浅谈mysql中多表不关联查询的实现方法

    大家在使用MySQL查询时正常是直接一个表的查询,要不然也就是多表的关联查询,使用到了左联结(left join).右联结(right join).内联结(inner join).外联结(outer join).这种都是两个表之间有一定关联,也就是我们常常说的有一个外键对应关系,可以使用到 a.id = b.aId这种语句去写的关系了.这种是大家常常使用的,可是有时候我们会需要去同时查询两个或者是多个表的时候,这些表又是没有互相关联的,比如要查user表和user_history表中的某一些数据

随机推荐