Easyui在treegrid添加控件的实现方法


Posted in Javascript onJune 23, 2017

 easyui 树加控件

最近看了一个easy感觉里面的树搞得还不错,虽然觉得让人有点不灵活的感觉,我们来说说怎么在树种添加控件效果

Easyui在treegrid添加控件的实现方法

在书中添加需要用到formatter这个属性,可以在加载的时候显示

function formatProgress(value){
 //console.log(value);
 if (value){
  var box = value.split(",");
  //console.log(box);
  var boxid = box[1];
  var s;
  //alert(value);
  if(box[0]=="显示"){
   s = '<input id='+boxid+' type="checkbox" onclick="isShow()" checked="checked">';
  }else{
   s = '<input id='+boxid+' type="checkbox" onclick="isShow()" >';
  }
  return s;
 } else {
  return '';
 }
}

这样在加载的时候会显示控件了,如果在加载的时候控制类型可以,根据value的值进行判断select的可以这样麻烦了一点但是也可以用。

function formatProgress1(value){
 console.log("formatProgress1 执行了");
 console.log(value);
 if (value){
  var box = value.split(",");
  console.log(box);
  var boxid = box[1];
  var s;
  if(box[0]=='缺省'){
   s= '<select class='+boxid+' onchange="isType()"><option selected="selected" value="0">缺省</option><option value="1">直接链接</option><option value="2">内容列表</option><option value="3">教学资源</option></select>'; 
  }else if(box[0]=='直接链接'){
   s= '<select class='+boxid+' onchange="isType()"><option value="0" >缺省</option><option value="1" selected="selected">直接链接</option><option value="2">内容列表</option><option value="3">教学资源</option></select>'; 
  }else if(box[0]=='内容列表'){
   s= '<select class='+boxid+' onchange="isType()"><option value="0" >缺省</option><option value="1">直接链接</option><option selected="selected" value="2">内容列表</option><option value="3">教学资源</option></select>'; 
  }else if(box[0]=='教学资源'){
   s= '<select class='+boxid+' onchange="isType()"><option value="0" >缺省</option><option value="1">直接链接</option><option value="2">内容列表</option><option selected="selected" value="3">教学资源</option></select>'; 
  }
  return s;
 } else {
  return '';
 }
}

easyui里面的东西有些还是挺灵活的,但是样式上面没有bootstrap做的好看,但是我觉树做的真心可以。

以上所述是小编给大家介绍的Easyui在treegrid添加控件的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
Aug 05 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
Dec 14 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
Angularjs中ng-repeat的简单实例
Aug 25 Javascript
在 Angular中 使用 Lodash 的方法
Feb 11 Javascript
Vue.directive()的用法和实例详解
Mar 04 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
Apr 08 Javascript
JS实现动态生成html table表格的方法分析
Jul 11 Javascript
Vue3.0数据响应式原理详解
Oct 09 Javascript
微信小程序实现点击图片放大预览
Oct 21 Javascript
Nuxt页面级缓存的实现
Mar 09 Javascript
JS实现拖动模糊框特效
Aug 25 Javascript
详解用vue.js和laravel实现微信支付
Jun 23 #Javascript
详解用vue.js和laravel实现微信授权登陆
Jun 23 #Javascript
妙用Angularjs实现表格按指定列排序
Jun 23 #Javascript
VUE中v-model和v-for指令详解
Jun 23 #Javascript
JavaScript正则表达式简单实用实例
Jun 23 #Javascript
js中的事件委托或是事件代理使用详解
Jun 23 #Javascript
JS判断非空至少输入两个字符的简单实现方法
Jun 23 #Javascript
You might like
php中的时间显示
2007/01/18 PHP
浅谈PHP 闭包特性在实际应用中的问题
2009/10/30 PHP
常用PHP框架功能对照表
2014/10/23 PHP
ThinkPHP采用原生query实现关联查询left join实例
2014/12/02 PHP
PHP 等比例缩放图片详解及实例代码
2016/09/18 PHP
js 实现菜单上下显示附效果图
2013/11/21 Javascript
如何将网页表格内容导入excel
2014/02/18 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
2015/06/25 Javascript
Bootstrap Table使用心得总结
2016/11/29 Javascript
js仿QQ邮箱收件人选择与搜索功能
2017/02/10 Javascript
node.js爬虫爬取拉勾网职位信息
2017/03/14 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
2017/12/07 Javascript
vue的传参方式汇总和router使用技巧
2018/05/22 Javascript
详解webpack打包nodejs项目(前端代码)
2018/09/19 NodeJs
js中console在一行内打印字符串和对象的方法
2019/09/10 Javascript
初学vue出现空格警告的原因及其解决方案
2019/10/31 Javascript
js实现飞机大战游戏
2020/08/26 Javascript
《Python之禅》中对于Python编程过程中的一些建议
2015/04/03 Python
Python使用设计模式中的责任链模式与迭代器模式的示例
2016/03/02 Python
详解Python3操作Mongodb简明易懂教程
2017/05/25 Python
Python操作Oracle数据库的简单方法和封装类实例
2018/05/07 Python
python实现图片横向和纵向拼接
2020/03/05 Python
面向新手解析python Beautiful Soup基本用法
2020/07/11 Python
Python urllib库如何添加headers过程解析
2020/10/05 Python
收集的22款给力的HTML5和CSS3帮助工具
2012/09/14 HTML / CSS
标签和贴纸印刷:Lightning Labels
2018/03/22 全球购物
校园招聘策划书
2014/01/09 职场文书
运动会广播稿30字
2014/01/21 职场文书
绘画专业自荐信范文
2014/02/23 职场文书
幼儿园老师寄语
2014/04/03 职场文书
航空学院求职信
2014/06/11 职场文书
周一给客户的问候语
2015/11/10 职场文书
python中取整数的几种方法
2021/11/07 Python
iOS 16进一步确认,一共支持16款iPhone
2022/04/28 数码科技
最新动漫情报:2022年7月新番定档超过30部, OVERLORD骨王第四季也在其中噢
2022/05/04 日漫
Go 内联优化让程序员爱不释手
2022/06/21 Golang