列表树组件/ztree
yoyocmf 2018-12-18 20:14:11

 1、视图文件：

PHP Code复制内容到剪贴板
  1. <?= \backend\widgets\grid\TreeGrid::widget([  
  2.     'dataProvider' => $dataProvider,  
  3.     'keyColumnName' => 'department_id',  
  4.     'parentColumnName' => 'parent',  
  5.     'parentRootValue' => null, //first parentId value  
  6.     'pluginOptions' => [  
  7.         'initialState' => 'expanded',// expanded默认展开,collapse收起，只显示一级栏目  
  8.     ],  
  9.     'columns' => [  
  10.         'department_name',  
  11.         'level',  
  12.         'myorder',  
  13.         [  
  14.             'class' => 'yii\grid\ActionColumn',  
  15.             'template' => '{create} {view} {update} {delete}',  
  16.             'buttons' => [  
  17.                 'create' => function ($url, $model) {  
  18.                     return Html::a("<i class='fa fa-plus'></i>", ['create', 'id' => $model->department_id], ['class' => 'btn btn-default btn-xs']);  
  19.                 }  
  20.             ]  
  21.         ],  
  22.     ],  
  23. ]); ?>  

 

2、如果使用searchModel，数据不要分页：

PHP Code复制内容到剪贴板
  1. 'pagination' => false,  //不分页  

WX20181218-201352@2x.png

 

PHP Code复制内容到剪贴板
  1. /** 
  2.  * {@inheritdoc} 
  3.  */  
  4. public function rules()  
  5. {  
  6.     return [  
  7.         ...,  
  8.         [['parent_id'], 'checkParent'],  
  9.     ];  
  10. }  
  11.   
  12. /** 
  13.  * 检测父级是否存在并且赋值level 
  14.  * @param $attribute 
  15.  * @param $params 
  16.  */  
  17. public function checkParent($attribute, $params)  
  18. {  
  19.     $parent_id = $this->$attribute;  
  20.     if ($parent_id) {  
  21.         $parent = self::findOne($parent_id);  
  22.         if ($parent) {  
  23.             // 如果有父级，节点层级加1  
  24.             $this->level = ($parent->level += 1);  
  25.         } else {  
  26.             $this->addError($attribute, '父级节点不存在');  
  27.         }  
  28.     }  
  29. }  
  30.   
  31. /** 
  32.  * 递归删除子分类 
  33.  */  
  34. public function afterDelete()  
  35. {  
  36.     $ids = $this->getChildrenIds($this->id);  
  37.     self::deleteAll(["in", "id", $ids]);  
  38.     parent::afterDelete();  
  39. }  
  40.   
  41. /** 
  42.  * 获取指定父级下的所有子级ID 
  43.  * @param $categoryId 
  44.  * @return array 
  45.  */  
  46. public function getChildrenIds($categoryId)  
  47. {  
  48.     $ids = [];  
  49.     $res = self::find()->where(["parent_id" => $categoryId])->all();  
  50.     if ($res) {  
  51.         foreach ($res as $val) {  
  52.             $ids[] = $val['id'];  
  53.             $ids = array_merge($ids, $this->getChildrenIds($val['id']));  
  54.         }  
  55.     }  
  56.     return $ids;  
  57. }  
  58.   
  59. /** 
  60.  * 获取下拉树列表 
  61.  * 
  62.  * @param string $id 
  63.  * @return array 
  64.  */  
  65. public static function getDropDownTreeList($id = '')  
  66. {  
  67.     $list = self::find()  
  68.         ->andFilterWhere(['<>', 'id', $id])  
  69.         ->select(['id', 'parent_id', 'title'])  
  70.         ->orderBy('sort asc,id asc')  
  71.         ->asArray()  
  72.         ->all();  
  73.     $tree = Tree::build($list,'id', 'parent_id', 'children', 0);  
  74.     return self::generationDropDown($tree);  
  75. }  
  76. /** 
  77.  * 生成下拉选择的列表结束 
  78.  * @param array $tree 
  79.  * @param array $result 
  80.  * @param int $deep 
  81.  * @param string $separator 
  82.  * @return array 
  83.  */  
  84. protected static function generationDropDown($tree = [], &$result = [], $deep = 0, $separator = '--'){  
  85.     $deep++;  
  86.     foreach ($tree as $list) {  
  87.         $result[$list['id']] = str_repeat($separator, $deep - 1) . $list['title'];  
  88.         if (isset($list['children'])) {  
  89.             self::generationDropDown($list['children'], $result, $deep);  
  90.         }  
  91.     }  
  92.     return $result;  
  93. }  

 

 

参照【用户管理】 - 【部门管理】

 1.png

 

 

checkbox 组件 

 WX20190113-211228@2x.png

use backend\widgets\ztree\CheckboxWidget;

 

PHP Code复制内容到剪贴板
  1. <?= $form->field($module, 'ttids')->widget(CheckboxWidget::className(), [  
  2.     'nodes' => \backend\models\InfoType::getDropdownZtree($module->ttids),  
  3.     'options' => [  
  4.         'level' => 0, // （可选）默认为0不限，允许选择的checkbox的树级别  
  5.         'selectAll' => true, //（可选）默认为true，是否显示全选/取消全选按钮  
  6.     ],  
  7. ])->label(false); ?>  

 

 

PHP Code复制内容到剪贴板
  1. <?= \backend\widgets\ztree\CheckboxWidget::widget(  
  2.     [  
  3.         'name' => 'select-menu',  
  4.         'nodes' => \backend\modules\user\models\Permission::getTreeData(),  
  5.         'options' => [  
  6.             'value' => ''  
  7.         ]  
  8.     ]  
  9. ) ?>  

 

这里的nodes需要遵循格式为：

[

    {

        "id":1,

        "pId":0,

        "checked":false

    }

]

 

添加点击回调事件：

PHP Code复制内容到剪贴板
  1. <?= \backend\widgets\ztree\CheckboxWidget::widget(  
  2.         [  
  3.             'name' => 'select-menu',  
  4.             'nodes' => $treeData,  
  5.             'options' => [  
  6.                 'id' => 'select-rbac-menu',  
  7.                 'value' => ''  
  8.             ],  
  9.             'setting' => [  
  10.                 'callback' => '{onCheck : onCheckRole}', // 点击回调  
  11.             ]  
  12.         ]  
  13.     ) ?>  

 

JavaScript Code复制内容到剪贴板
  1. <script>  
  2.     var index = parent.layer.getFrameIndex(window.name); //获取窗口索引  
  3.     var selectNodes = null;  
  4.     /** 
  5.      * 点击节点的回调事件 
  6.      * @param event 
  7.      * @param treeId 对应 zTree 的 treeId 
  8.      * @param treeNode 被点击的节点 JSON 数据对象 
  9.      * @param clickFlag 节点被点击后的选中操作类型，可忽略 
  10.      */  
  11.     function onCheckRole(event, treeId, treeNode, clickFlag) {  
  12.         var treeObj = $.fn.zTree.getZTreeObj("select-rbac-menu");  
  13.         var nodes = treeObj.getCheckedNodes(true);  
  14.         var ids = [];  
  15.         for (var i = 0; i < nodes.length; i++) {  
  16.             ids.push(nodes[i].origin);  
  17.             // ids[] = nodes[i].origin  
  18.         }  
  19.         selectNodes = ids;  
  20.         // console.log(ids);  
  21.     }  
  22. </script>  

 

model方法：

PHP Code复制内容到剪贴板
  1. /** 
  2.      * 获取分类下拉树列表 
  3.      * @param $defaultIds 
  4.      * @return array 
  5.      */  
  6.     public static function getDropdownZtree($defaultIds)  
  7.     {  
  8.         if($defaultIds){  
  9.             $defaultIds = explode(",",$defaultIds);  
  10.         }  
  11.         $ret = []; //返回的数据  
  12.         $res = self::find()->orderBy("myorder asc,typeid desc")->all();  
  13.         foreach ($res as $k => $p){  
  14.             if(!$p){  
  15.                 continue;  
  16.             }  
  17.             $arr = [  
  18.                 "id" => $p->typeid,  
  19.                 "pId" => '0',  
  20.                 "name" => $p->tname,  
  21.             ];  
  22.             if ($defaultIds) {  
  23.                 if (in_array($p->typeid, $defaultIds)) {  
  24.                     $arr['checked'] = true;  
  25.                 }  
  26.             }  
  27.             $ret[] = $arr;  
  28.         }  
  29.   
  30. //        p($ret);  
  31.         return $ret;  
  32.     }  

 

 

 

树列表：

1.png

PHP Code复制内容到剪贴板
  1. <?= \backend\widgets\ztree\DefaultNodesWidget::widget(  
  2.     [  
  3.         'name' => 'status-manage',  
  4.         'nodes' => \backend\models\StatusManage::getDropDownStatusType(),  
  5.         'search' => false,  
  6.         'setting' => [  
  7.             'callback' => '{onClick : clickStatusMenu}', // 点击回调  
  8.         ]  
  9.     ]  
  10. ) ?>  

 

如果写原生就不必放到页面最下面

PHP Code复制内容到剪贴板
  1. <script>  
  2.   
  3.     /** 
  4.      * 点击节点的回调事件 
  5.      * @param event 
  6.      * @param treeId 对应 zTree 的 treeId 
  7.      * @param treeNode 被点击的节点 JSON 数据对象 
  8.      * @param clickFlag 节点被点击后的选中操作类型，可忽略 
  9.      */  
  10.     function clickStatusMenu(event, treeId, treeNode, clickFlag) {  
  11.         // console.log(treeNode);  
  12.         // console.log(treeNode.id);  
  13.         layer.load(2, {time: 1 * 1000}); //又换了种风格，并且设定最长等待1秒  
  14.         // 更新刷新页面，并在reload时给服务器传参数  
  15.         var url = "<?=\yii\helpers\Url::to(["index"])?>" + "&type=" + treeNode.id;  
  16.         // 更新页面  
  17.   
  18.         console.log(url);  
  19.         // return false;  
  20.         window.location.href = url;  
  21.         // $.pjax({url: url, container: '#countries', timeout: 0});  
  22.     }  
  23.   
  24. </script>  

 

PHP Code复制内容到剪贴板
  1. /** 
  2.  * 获取状态类型可选择的树型列表 
  3.  * @return array 
  4.  */  
  5. public static function getDropDownStatusType(){  
  6.     $res = self::find()->where(["type"=>0])->orderBy("myorder asc,status desc")->asArray()->all();//默认0是状态类型  
  7.     $list = [];  
  8.     $list[] = [  
  9.         "id" => "0_0",  
  10.         "pId" => 0,  
  11.         "name" => "状态类型",  
  12.         "open" => true,  
  13.     ];  
  14.     foreach ($res as $k => $v){  
  15.         $list[] = [  
  16.             "id" => $v["status"],  
  17.             "pId" => $v["parent_status"]?$v["parent_status"]:"0_0",  
  18.             "name" => $v["name"],  
  19.             "open" => true,  
  20.         ];  
  21.     }  
  22.   
  23.     return $list;  
  24. }  

 

 

 

本文来自于：http://www.yoyo88.cn/note/yoyocmf/396.html

上一篇 图片上传插件
下一篇 图标选择插件
相关的文章
Powered by yoyo苏ICP备15045725号