Easyui adds control example tutorial to treegrid-JS Tutorial-php.cn

Easyui adds control example tutorial to treegrid

小云云

Release： 2018-01-06 10:45:48

Original

1825 people have browsed it

I recently watched an easy and I feel that the trees in it are quite good, although it feels a bit inflexible. Let’s talk about how to add control effects to tree types. This article mainly introduces the implementation method of adding controls to treegrid in Easyui. Friends in need can refer to it, I hope it can help everyone.

easyui tree plus control

效果是这样

#The formatter attribute is needed to add in the book, which can be displayed when loading

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=&#39;+boxid+&#39; type="checkbox" onclick="isShow()" checked="checked">';
  }else{
   s = '<input id=&#39;+boxid+&#39; type="checkbox" onclick="isShow()" >';
  }
  return s;
 } else {
  return '';
 }
}

Copy after login

Like this The control will be displayed when loading. If the control type is OK when loading, the selection can be judged based on the value. This is a little troublesome, but it can be used.

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=&#39;+boxid+&#39; 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=&#39;+boxid+&#39; 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=&#39;+boxid+&#39; 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=&#39;+boxid+&#39; 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 '';
 }
}

Copy after login

Some of the things in easyui are quite flexible, but the styles are not as good-looking as those made by bootstrap, but I think the trees are really good.

Related recommendations:

About the implementation of EasyUI’s TreeGrid query function in jQuery,

About how jQuery Easyui Treegrid implements the display checkbox function Example

Simple example of treegrid usage in jquery easyui

The above is the detailed content of Easyui adds control example tutorial to treegrid. For more information, please follow other related articles on the PHP Chinese website!