自定义dorado控件之自定义继承自DataTreeGrid的行政区划树列表控件

这篇文章是基于已经实现了一个springBoot+mybatis+mysql的行政区划后台代码后在写一个dorado控件的，具体代码之后会上传到博客。代码包为folivora-sysAdminDivisions。不贴出springBoot+mybaties+mysql实现部分原因是创建控件跟这部分无关，这部分可以使用其他框架实现。
运行环境：windows+eclipse
项目环境：springBoot+maven+mybatis+mysql+dorado

package cn.idatatech.folivora.common.widget;

import com.bstek.dorado.annotation.ClientObject;
import com.bstek.dorado.annotation.ClientProperty;
//import com.bstek.dorado.annotation.ClientProperty;
import com.bstek.dorado.annotation.IdeProperty;
import com.bstek.dorado.view.annotation.Widget;
import com.bstek.dorado.view.widget.treegrid.DataTreeGrid;
//创建一个自定义控件
@Widget(name = "AdminDivisionsDataTreeGrid", category = "Collection", dependsPackage = "admin-divisions-data-tree-grid")
@ClientObject(prototype = "dorado.widget.AdminDivisionsDataTreeGrid", shortTypeName = "AdminDivisionsDataTreeGrid")
public class AdminDivisionsDataTreeGrid extends DataTreeGrid {
    //定义控件属性
    private boolean checkable;
    private int     childrenCount;

    @IdeProperty(highlight = 1)
    public boolean isCheckable() {
        return checkable;
    }

    public void setCheckable(boolean checkable) {
        this.checkable = checkable;
    }

    @ClientProperty(escapeValue = "0")
    public int getChildrenCount() {
        return childrenCount;
    }

    public void setChildrenCount(int childrenCount) {
        this.childrenCount = childrenCount;
    }


}

二、创建控件实现逻辑的js

admin-divisions-data-tree-grid.js

(function () {
    var SysAdminDivisions = new dorado.EntityDataType(),
        //创建一个数据提供者,参数是数据提供者的服务
        dataProvider = dorado.DataProvider.create('sysAdminDivisionsController#load');
    SysAdminDivisions.set('propertyDefs', [
        {name: 'id' },
        {name: 'parentId' },
        {name: 'type' },
        {name: 'code' },
        {name: 'name' },
        {name: 'pinyin' },
        {name: 'isDisplay' },
        {name: 'sort' },
        {name: 'hasChild' },
        {name: 'count' },
//        {name: 'icon' },
        {name: 'display' },
        {name: 'checked'},
        //实体类型中的数据关联属性。数据关联属性常常用来实现较大量数据的懒装载
        new dorado.Reference({ name: 'children', //属性名，是一个只读属性 //属性的类型 dataType: new dorado.AggregationDataType({ //AggregationDataType聚合类型 elementDataType: SysAdminDivisions //聚合元素的数据类型 }), dataProvider: dataProvider, //用于为数据关联属性提供数据的数据提供者 parameter: { //提取数据时使用的参数。 即调用dorado.DataProvider时使用的参数。此处允许使用JSON数据模板 parentId: function () { //create(String path)创建一个数据路径的处理器,path 数据路径表达式。 //evaluate(Object data , boolean options)针对传入的数据应用(执行)路径表达式，并返回表达式的执行结果。 return dorado.DataPath.create("id").evaluate(this, true); } } })
    ]);

    var AdminDivisionsDataTreeGrid = dorado.widget.AdminDivisionsDataTreeGrid = $extend(
        dorado.widget.DataTreeGrid,
        {
            $className: 'dorado.widget.AdminDivisionsDataTreeGrid', // 派生出来的类名
            // constructor是一个特殊的方法用于声明子类的构造方法。
            constructor: function (arg) { console.log(arg); arg = arg || {}; this._checkable = arg['checkable']; var dataSet = new dorado.widget.DataSet({ dataType: SysAdminDivisions, dataProvider: dataProvider, parameter: { parentId: '0' } }); var treeOptions = { dataSet: dataSet, bindingConfigs: [{ childrenProperty: 'children', recursive: true, labelProperty: 'display', hasChild: true, hasChildProperty: 'hasChild', checkable: arg['checkable'], checkedProperty: 'checked', // iconProperty: 'icon' }], treeColumn: 'display', showHeader: false, beforeNodeCheckedChange: function (self, arg) { arg.node.expand(); }, columns: [ { property: 'display', // property: 'name', readOnly: true, onRenderCell: function (col, arg) { var data = arg.data; // if (data.get('isUser')) { if (data.get('hasChild')) { data.disableObservers(); // data.set('icon', $url('>/static/images/icons/folivora/user.png')); data.enableObservers(); } if (data.get('checked') == null) { data.disableObservers(); data.set('checked', false); data.enableObservers(); } arg.processDefault = true; } } ] }; _.extend(arg, treeOptions); $invokeSuper.call(this, arguments); } }
    );

    dorado.Toolkits.registerPrototype('widget', 'AdminDivisionsDataTreeGrid', AdminDivisionsDataTreeGrid);
})();

对js部分代码有疑问的可以参考如下两个网址：
控件开发手册
 dorado控件API

三、配置控件的java代码类路径

找到项目下dorado-home文件夹，打开该文件夹下的components-context.xml,在该文件下添加如下配置：

<bean id="cn.idatatech.folivora.common.widget.AdminDivisionsDataTreeGrid" parent="dorado.defaultComponentTypeRegister"/>

完整代码如下：

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:d="http://www.bstek.com/dorado/schema"
       xsi:schemaLocation="
           http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-2.0.xsd
           http://www.bstek.com/dorado/schema
           http://www.bstek.com/dorado/schema/spring-dorado-7.0.xsd"
>
    <bean id="cn.idatatech.folivora.common.widget.AdminDivisionsDataTreeGrid" parent="dorado.defaultComponentTypeRegister"/>
</beans>

四、配置控件实现逻辑的js包路径

找到项目下的dorado-home文件夹的packages-config.xml文件，添加配置代码如下：

<Package name="admin-divisions-data-tree-grid" pattern="js" depends="tree-grid">
            classpath:/dorado/widgets/admin-divisions-data-tree-grid/admin-divisions-data-tree-grid
        </Package>

完整代码如下：

<?xml version="1.0" encoding="UTF-8"?>
<config>
    <Patterns>
        <Pattern name="js" contentType="text/javascript" charset="UTF-8"
                 mergeRequests='${configure["view.mergeJavaScript"]}' resourceSuffix=".js"
                 baseUri=">dorado/client/folivora"/>
        <Pattern name="css" contentType="text/css" charset="UTF-8"
                 mergeRequests='${configure["view.mergeStyleSheet"]}' resourceSuffix=".css"
                 baseUri=">dorado/client/folivora"/>
        <Pattern name="res-js" contentType="text/javascript" charset="UTF-8"
                 mergeRequests="false" resourceSuffix=".js"
                 baseUri=">dorado/client/resources"/>
        <Pattern name="res-css" contentType="text/css" charset="UTF-8"
                 mergeRequests="false" resourceSuffix=".css"
                 baseUri=">dorado/client/resources"/>
    </Patterns>

    <Packages>

        <Package name="admin-divisions-data-tree-grid" pattern="js" depends="tree-grid">
            classpath:/dorado/widgets/admin-divisions-data-tree-grid/admin-divisions-data-tree-grid
        </Package>

    </Packages>
</config>

五、检验结果

以上步骤执行完成后，更新下dorado配置规则，然后创建一个dorado视图文件，在视图文件中搜索AdminDivisionsDataTreeGrid这个控件，可以看到这时候已经添加了这个控件。添加该控件后，写一个访问该view视图的代码访问当前视图。启动项目后访问这个视图就可以看到自定义组件显示效果。

注意：如果没有后台SysAdminDivisions的相关数据库操作和数据库表，那么这两访问是会报错的。相关代码会上传到博客。

说明：如果只是想看看自己的控件是否定义成功而不用实现任何操作，可以只实现上面提到的第一步和第三步，然后直接执行第五步就可以、这样可以搜索到控件，但是控件并没有实现任何逻辑功能，相当于直接使用一个空的控件。效果和使用DataTreeGrid控件差不多，就是多了两个没有用的属性而已。不过这样可以不依赖后台代码和数据库的实现。