自定義dorado控制元件之自定義繼承自DataTreeGrid的行政區劃樹列表控制元件
阿新 • • 發佈：2019-01-09
這篇文章是基於已經實現了一個springBoot+mybatis+mysql的行政區劃後臺程式碼後在寫一個dorado控制元件的，具體程式碼之後會上傳到部落格。程式碼包為folivora-sysAdminDivisions。不貼出springBoot+mybaties+mysql實現部分原因是建立控制元件跟這部分無關，這部分可以使用其他框架實現。
執行環境：windows+eclipse
專案環境：springBoot+maven+mybatis+mysql+dorado
目錄
建立實現控制元件的java程式碼
建立控制元件實現邏輯的js
配置控制元件的java程式碼類路徑
配置控制元件實現邏輯的js包路徑
檢驗結果
一、建立實現控制元件的java程式碼
建立一個java類，如下：
AdminDivisionsDataTreeGrid.java
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 二、建立控制元件實現邏輯的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控制元件差不多，就是多了兩個沒有用的屬性而已。不過這樣可以不依賴後臺程式碼和資料庫的實現。