jquery easyui treegrid使用小结 二

在实际应用中可能会碰到不同的需求,比如会根据每行不同的参数或属性设置来设置同列不同的editor类型,这时原有的例子就显的有点太过简单,不能实现我们的需求,现在应用我在项目中的操作为例,显示下实现同列不同操作的情况:(在这,我把例子的情况完全整合到了js里面配置实现,如有习惯于js实现方式的也可参考)

html:

<table id="comTypeAndPropertyTree"></table>//个人觉得这样更显的页面清晰,所有的配置都放到js里实现

js:

var types = [
      {typeId:0,typeName:‘Normal‘},
      {typeId:1,typeName:‘URL‘},
      {typeId:2,typeName:‘Symbol‘}
  ];

$(function(){
     var lastIndex;
   $(‘#comTypeAndPropertyTree‘).treegrid({
    title:‘产品库配置‘,
    height:550,
    rownumbers: true,
    animate:true,
    url:‘getComTypeAndPropertyTreeRoot.action‘,
    idField:‘id‘,//id=productId_propId_largetypeId_midlletypeId_comtypeId;
    treeField:‘name‘,
    frozenColumns:[[
                 {title:‘名称‘,field:‘name‘,width:300,
                  formatter:function(value){
                   return ‘<span style="color:red">‘+value+‘</span>‘;
                  }
                 }
    ]],
    columns:[[
        {title:‘library‘,field:‘library‘,width:100,editor:{type:‘checkbox‘,options:{on:‘1‘,off:‘0‘}},
         formatter:function(value,row){
         if(!row.leaf){
          if(value==1){
            return ‘<img src="images/checkbox_checked.jpg"/>‘;
           }else{
            return ‘<img src="images/checkbox_unchecked.jpg"/>‘;
           }
         }else{
          return ‘‘;
         }
         }},
     {title:‘显示名称‘,field:‘displayName‘,width:100,editor:‘text‘},
     {title:‘type‘,field:‘type‘,width:100,
      editor:{type:‘combobox‘,options:{valueField:‘typeId‘,textField:‘typeName‘,data:types}},
         formatter:function(value,row){
          if(row.leaf){
           for(var i=0; i<types.length; i++){
         if (types[i].typeId == value) return types[i].typeName;
        }
        return types[0].typeName;
       }else{
        return ‘‘;
       }
                  }
        },
     {title:‘Expose‘,field:‘expose‘,width:100,editor:{type:‘checkbox‘,options:{on:‘1‘,off:‘0‘}},
         formatter:function(value,row){
         if(row.leaf){
           if(value==1){
            return ‘<img src="images/checkbox_checked.jpg"/>‘;
           }else{
            return ‘<img src="images/checkbox_unchecked.jpg"/>‘;
           }
          }else{
           return ‘‘;
          }
         }},
     {title:‘Annotate‘,field:‘annotate‘,width:100,editor:{type:‘checkbox‘,options:{on:‘1‘,off:‘0‘}},
         formatter:function(value,row){
          if(row.leaf){
           if(value==1){
            return ‘<img src="images/checkbox_checked.jpg"/>‘;
           }else{
            return ‘<img src="images/checkbox_unchecked.jpg"/>‘;
           }
          }else{
           return ‘‘;
          }
         }
        },
     {title:‘Load‘,field:‘load‘,width:100,editor:{type:‘checkbox‘,options:{on:‘1‘,off:‘0‘}},
         formatter:function(value,row){
          if(row.leaf){
           if(value==1){
            return ‘<img src="images/checkbox_checked.jpg"/>‘;
           }else{
            return ‘<img src="images/checkbox_unchecked.jpg"/>‘;
           }
          }else{
           return ‘‘;
          }
         }
        },
     {title:‘Name Available‘,field:‘nameAvailable‘,width:100,editor:{type:‘checkbox‘,options:{on:‘1‘,off:‘0‘}},
         formatter:function(value,row){
          if(row.leaf){
           if(value==1){
            return ‘<img src="images/checkbox_checked.jpg"/>‘;
           }else{
            return ‘<img src="images/checkbox_unchecked.jpg"/>‘;
           }
          }else{
           return ‘‘;
          }
         }
        },
     {title:‘Value Available‘,field:‘valueAvailable‘,width:100,editor:{type:‘checkbox‘,options:{on:‘1‘,off:‘0‘}},
         formatter:function(value,row){
          if(row.leaf){
           if(value==1){
            return ‘<img src="images/checkbox_checked.jpg"/>‘;
           }else{
            return ‘<img src="images/checkbox_unchecked.jpg"/>‘;
           }
          }else{
           return ‘‘;
          }
         }
        },
     {title:‘Export As OAT‘,field:‘exportAsOAT‘,width:100,editor:{type:‘checkbox‘,options:{on:‘1‘,off:‘0‘}},
         formatter:function(value,row){
          if(row.leaf){
           if(value==1){
            return ‘<img src="images/checkbox_checked.jpg"/>‘;
           }else{
            return ‘<img src="images/checkbox_unchecked.jpg"/>‘;
           }
          }else{
           return ‘‘;
          }
         }
        },
     {title:‘Required‘,field:‘required‘,width:100,editor:{type:‘checkbox‘,options:{on:‘1‘,off:‘0‘}},
         formatter:function(value,row){
          if(row.leaf){
           if(value==1){
            return ‘<img src="images/checkbox_checked.jpg"/>‘;
           }else{
            return ‘<img src="images/checkbox_unchecked.jpg"/>‘;
           }
          }else{
           return ‘‘;
          }
         }
        },
     {title:‘Units‘,field:‘units‘,width:100,editor:‘text‘,
      formatter:function(value,row){
       if(row.leaf){
        return value;
       }else{
        return ‘‘;
       }
      }},
     {title:‘VM‘,field:‘vm‘,width:100,editor:‘text‘,
      formatter:function(value,row){
       if(row.leaf){
        return value;
       }else{
        return ‘‘;
       }
      }}
    ]]
    ,onClickRow:function(row){//运用单击事件实现一行的编辑结束,在该事件触发前会先执行onAfterEdit事件
     var rowIndex = row.id;
     if (lastIndex != rowIndex){
      $(‘#comTypeAndPropertyTree‘).treegrid(‘endEdit‘, lastIndex);
     }
    }
    ,onDblClickRow:function(row){//运用双击事件实现对一行的编辑
     var rowIndex = row.id;
     if (lastIndex != rowIndex){
      $(‘#comTypeAndPropertyTree‘).treegrid(‘endEdit‘, lastIndex);
      $(‘#comTypeAndPropertyTree‘).treegrid(‘beginEdit‘, rowIndex);
      lastIndex = rowIndex;
     }
    }
    ,onBeforeEdit:function(row){
           beforEditRow(row);//这里是功能实现的主要步骤和代码
    }
    ,onAfterEdit:function(row,changes){
     var rowId = row.id;
     $.ajax({
          url:"saveProductConfig.action" ,
          data: row,
          success: function(text){
         $.messager.alert(‘提示信息‘,text,‘info‘);
          }
        });
    }
   });
  });
  function beforEditRow(row){//这个是核心的,很有用的,如有同样需求的话可以借鉴实现
      var libraryCoclum = $(‘#comTypeAndPropertyTree‘).treegrid(‘getColumnOption‘,‘library‘);
         var exposeCoclum = $(‘#comTypeAndPropertyTree‘).treegrid(‘getColumnOption‘,‘expose‘);
         var annotateCoclum = $(‘#comTypeAndPropertyTree‘).treegrid(‘getColumnOption‘,‘annotate‘);
         var loadCoclum = $(‘#comTypeAndPropertyTree‘).treegrid(‘getColumnOption‘,‘load‘);
         var nameAvailableCoclum = $(‘#comTypeAndPropertyTree‘).treegrid(‘getColumnOption‘,‘nameAvailable‘);
         var valueAvailableCoclum = $(‘#comTypeAndPropertyTree‘).treegrid(‘getColumnOption‘,‘valueAvailable‘);
         var exportAsOATCoclum = $(‘#comTypeAndPropertyTree‘).treegrid(‘getColumnOption‘,‘exportAsOAT‘);
         var requiredCoclum = $(‘#comTypeAndPropertyTree‘).treegrid(‘getColumnOption‘,‘required‘);

         var unitsCoclum = $(‘#comTypeAndPropertyTree‘).treegrid(‘getColumnOption‘,‘units‘);
         var vmCoclum = $(‘#comTypeAndPropertyTree‘).treegrid(‘getColumnOption‘,‘vm‘);

          var typeCoclum = $(‘#comTypeAndPropertyTree‘).treegrid(‘getColumnOption‘,‘type‘);

         var checkboxOptionsObj = new Object();
    checkboxOptionsObj.on=‘1‘;
    checkboxOptionsObj.off=‘0‘;
      var checkboxEditorObj = new Object();
    checkboxEditorObj.type=‘checkbox‘;
    checkboxEditorObj.options=checkboxOptionsObj;

   var comboboxOptionsObj = new Object();
    comboboxOptionsObj.valueField=‘typeId‘;
    comboboxOptionsObj.textField=‘typeName‘;
    comboboxOptionsObj.data=types;
   var comboboxEditorObj = new Object();
    comboboxEditorObj.type=‘combobox‘;
    comboboxEditorObj.options=comboboxOptionsObj;
   if(row.leaf){
    libraryCoclum.editor=null;
    exposeCoclum.editor=checkboxEditorObj;
    annotateCoclum.editor=checkboxEditorObj;
    loadCoclum.editor=checkboxEditorObj;
    nameAvailableCoclum.editor=checkboxEditorObj;
    valueAvailableCoclum.editor=checkboxEditorObj;
    exportAsOATCoclum.editor=checkboxEditorObj;
    requiredCoclum.editor=checkboxEditorObj;

    unitsCoclum.editor=‘text‘;
    vmCoclum.editor=‘text‘;

    typeCoclum.editor=comboboxEditorObj;
   }else{
    libraryCoclum.editor=checkboxEditorObj;
    exposeCoclum.editor=null;
    annotateCoclum.editor=null;
    loadCoclum.editor=null;
    nameAvailableCoclum.editor=null;
    valueAvailableCoclum.editor=null;
    exportAsOATCoclum.editor=null;
    requiredCoclum.editor=null;

    unitsCoclum.editor=null;
    vmCoclum.editor=null;

    typeCoclum.editor=null;
   }
    }

实现效果图:实现流程:onDblClickRow --( onBeforeEdit -- onAfterEdit) -- onClickRow,操作上只需要双击和单击两个事件来完成操作,而另两个事件是在中间自动实现完成。

再分享一下我老师大神的人工智能教程吧。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://www.cnblogs.com/captainbed

原文地址:https://www.cnblogs.com/sjwudhwhhw/p/10162091.html

时间: 2024-09-29 09:15:04

jquery easyui treegrid使用小结 二的相关文章

jquery easyui treegrid使用小结

在实际应用中可能会碰到不同的需求,比如会根据每行不同的参数或属性设置来设置同列不同的editor类型,这时原有的例子就显的有点太过简单,不能实现我们的需求,现在应用我在项目中的操作为例,显示下实现同列不同操作的情况:(在这,我把例子的情况完全整合到了js里面配置实现,如有习惯于js实现方式的也可参考) html: <table id="comTypeAndPropertyTree"></table>//个人觉得这样更显的页面清晰,所有的配置都放到js里实现 js

Jquery easyui treegrid实现树形表格的行拖拽

前几天修改了系统的一个功能——实现树形列列表的行拖拽,以达到排序的目的.现在基本上功能实现,现做一个简单的总结. 1.拿到这个直接网上搜,有好多,但是看了后都觉得不是太复杂就是些不是特别想看的例子,自己太懒(对自己不是很熟悉的东西是不愿意第一去看的).结果选择良久,还是jquery easyui treegrid这个例子自己看起来比较熟悉.于是就专心研究了,从官方网站http://www.jeasyui.net/下载了demo,开始研读.先把jsp页面一些代码贴出 <link rel="s

jQuery EasyUI 入门简介

对于前端开发者来说,在开发过程中应用"框架"这一工具,可以极大的缩短开发时间,提高开发效率.今天我们就开介绍一款常用的框架--jQuery EasyUI. 那什么是jQuery EasyUI呢? jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签.然后就可以

springmvc + jquery easyui实现分页显示

如有不明白的地方,戏迎加入QQ群交流:66728073 一,下载并导入jquery easyui的导 <link rel="stylesheet" type="text/css" href="<%=basePath%>js/jquery-easyui-1.4/themes/default/easyui.css"> <link rel="stylesheet" type="text/css

第一百九十二节,jQuery EasyUI 使用

jQuery EasyUI 使用 学习要点: 1.引入必要的文件 2.加载 UI 组件的方式 3.使用 easyload.js 智能加载 4.Parser 解析器 本节课重点了解 EasyUI 的两种使用方法,包含不同的加载已经 easyload 智能按需加 载.最后了解一下 Parser 解析器的用法. 一.引入必要的文件 <!--引入 jQuery 核心库,这里采用的是 2.0--> <script type="text/javascript" src="

第二百二十八节,jQuery EasyUI,TreeGrid(树形表格)组件

jQuery EasyUI,TreeGrid(树形表格)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 TreeGrid(树形表格)组件的使用方法,这个组件依赖于 DataGrid(数据表格)组件. 一.加载方式 建立一个 JSON 文件 [ { "id": 1, "name": "系统管理", "date": "2015-05-10", &quo

jquery easyui根据需求二次开发记录

1.tree需要显示多个图标 实际需求:设备树上节点需搁三个图片,分别标识运行状态.告警状态.设备类型 解决方法:给tree的iconCls传入一个数组,分别是各状态下的class(css),然后要改动easyui关于tree节点组装部分的代码 if(item.iconCls ){ cc.push("<span class=\"tree-icon tree-folder "+(item.iconCls?item.iconCls:"")+"\

XXX系统开发小结(SSH+Jquery EasyUI)

一.项目总体介绍 前一段时间的工作中,笔者大概用了两三个月开发了一个Web管理信息系统,使用的框架集为Struts2.3.1+Spring3.0+Hibernate3+Jquery EasyUI1.3.5,系统业务逻辑并不复杂,完成数据的采集(以问卷的形式).计算处理和形成报告发布.EasyUI是一个很优秀的JS UI框架,使用简单方便,效果也还可以,是UI效果和带宽速度之间的一个折中之选.系统中还有新闻发布模块,用到了富文本编辑器,在比较了很多插件之后,选择了kindeditor,原因很简单,

第二百零二节,jQuery EasyUI,Layout(布局)组件

jQuery EasyUI,Layout(布局)组件 学习要点: 1.加载方式 2.布局属性 3.区域面板属性 4.方法列表 本节课重点了解 EasyUI 中 Layout(布局)组件的使用方法,这个组件依赖于 Panel(面 板)组件和 resizable(调整大小)组件. 一.加载方式 class 加载方式,这个属性一般使用class方法使用 <body id="box" class="easyui-layout"> <div data-opt