在实际应用中可能会碰到不同的需求,比如会根据每行不同的参数或属性设置来设置同列不同的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="data:images/checkbox_checked.jpg"/>';
}else{
return '<img src="data: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="data:images/checkbox_checked.jpg"/>';
}else{
return '<img src="data: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="data:images/checkbox_checked.jpg"/>';
}else{
return '<img src="data: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="data:images/checkbox_checked.jpg"/>';
}else{
return '<img src="data: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="data:images/checkbox_checked.jpg"/>';
}else{
return '<img src="data: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="data:images/checkbox_checked.jpg"/>';
}else{
return '<img src="data: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="data:images/checkbox_checked.jpg"/>';
}else{
return '<img src="data: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="data:images/checkbox_checked.jpg"/>';
}else{
return '<img src="data: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,操作上只需要双击和单击两个事件来完成操作,而另两个事件是在中间自动实现完成。

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

  1. (转)jquery easyui treegrid使用小结 (主要讲的是如何编辑easyui中的行信息包括添加 下拉列表等)

    在实际应用中可能会碰到不同的需求,比如会根据每行不同的参数或属性设置来设置同列不同的editor类型,这时原有的例子就显的有点太过简单,不能实现我们的需求,现在应用我在项目中的操作为例,显示下实现同列 ...

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

    前几天修改了系统的一个功能——实现树形列列表的行拖拽,以达到排序的目的.现在基本上功能实现,现做一个简单的总结. 1.拿到这个直接网上搜,有好多,但是看了后都觉得不是太复杂就是些不是特别想看的例子,自 ...

  3. jQuery easyui treegrid无法传参到后台bugger一记

    $("#lTreegrid").treegrid("options").queryParams={id:123456,name:"Hai he&quo ...

  4. Jquery EasyUI Treegrid按需加载子集

    项目说明,要一个有权限并且按需加载的树形列表. jeasyui网址 CSS <!--添加树状控件--> <link rel="stylesheet" type=& ...

  5. JQuery EasyUI treegrid展开与折叠,以及数据加载两次的问题

    问题:做项目的时候遇到代码生成的页面,只默认展开了一级节点,每次操作之后刷新还要手动一级一级展开,太麻烦了 官方API:http://www.jeasyui.net/plugins/186.html ...

  6. 关于jquery easyui treegrid的问题

    我是用的django web开发架构: 想实现如下功能: 权限架构 点击checkbox时,能获取该checkbox的值: 代码如下: <tr> <th field="na ...

  7. 项目常用jquery/easyui函数小结

    #项目常用jquery/easyui函数小结 ##背景 项目中经常需要使用到一些功能,封装.重构.整理后形成代码沉淀,在此进行分享 ##代码 ```javascript /** * @author g ...

  8. Jquery EasyUI中treegrid的中右键菜单和一般按钮同时绑定事件时的怪异事件

    做个项目使用jquery  easyui来做前端,也许是对此不是很熟悉,总是发现一些不可理解的事件. 主要源代码如下: <script type="text/javascript&qu ...

  9. Jquery EasyUI中treegrid

    Jquery EasyUI中treegrid的中右键菜单和一般按钮同时绑定事件时的怪异事件 InChatter系统开源聊天模块前奏曲   最近在研究WCF,又因为工作中的项目需要,要为现有的系统增加一 ...

随机推荐

  1. ZOJ 2411 Link Link Look(BFS)

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1411 题目大意:连连看,给出每次连线的两个坐标,求能消去多少方块,拐 ...

  2. [转]优化PHP程序的方法

    1. If a method c++an be static, declare it static. Speed improvement is by a factor of 4. 如果一个方法可静态化 ...

  3. Linux之CentOS下vsftp安装及配置相关操作

    1.安装ftps——vsftpd: #yum install vsftpd 2.指定上传下载目录配置: 如:用户名:xxx,需指定目录:/xxx/xxx #useradd -d /xxx/xxx -s ...

  4. PHOTOSHOP 半透明方格

    1.新建60*60的透明文档,在左方和上方用直线工具画白边,存储为图案(编辑/定义图案) 2.新建图层,用油漆桶填充图案 3. 选择若干小方格,填充白色后设置不透明度50%

  5. width(),innerHTML(),outerHTML()

    HTML代码: <div id="box"> <p>哈哈,随便写点内容</p> <p>删除的实例</p> <p&g ...

  6. 点击UserControl中的按钮将值传给winform页面

    源码下载地址:http://download.csdn.net/detail/dora_zhh/7456521 1.如图所示,点击选择按钮弹出用户控件UserControl 2.点击确定按钮,将值传给 ...

  7. centos 端口开放及关闭

    之前有讲过公司新买的服务器使用的是CentOS 5.5,部署好Tomcat之后却发现输入114.80.*.*:8080(即ip:8080)却无法显示Tomcat默认的首页.因为以前部署在Win Ser ...

  8. PHP引用传值规范问题

    在我上一篇:  shopnc 商城源码阅读笔记--开篇概述   中,遇到了一个PHP引用传值导致的错误,情况大致如下: 在我查阅PHP官方文档  的中文版的时候   http://php.net/ma ...

  9. 如何让listview列表为空时显示提示

    先在布局文件中声明一个TextView,再设置listview.setEmptyView(TextView).这样当listview中的数据为空时就会列表的位置就会显示textviw中的提示.

  10. 谷歌笔试题——排序,只允许0和其他元素交换

    2.2 长度为n的数组乱序存放着0至n-1. 现在只能进行0与其他数的swap,请设计并实现排序. 这题有一个隐含条件:即数组元素是连续的,即0--n-1,当你排好序后,你会发现数组元素和该元素的下标 ...