Dorado 9 : 22.3.2.1 修改视图并添加控件

步骤1：新增并配置Menu控件

双击打开MenuManage.view.xml这个视图文件，在【ViewConfig】节点下的【View】节点下添加一个Menu控件。

设置Menu控件属性如下：

属性	值	说明
id	menuOper	控件的Id

接下来在【menuOper】下新增3个MenuItem，MenuItem1~MenuItem3，分别设置MenuItem的属性如下：

MenuItem	name	caption	icon	tags
MenuItem1	menuitemAdd	添加同级节点	fa fa-plus	add
MenuItem2	menuitemAddChild	添加下级节点	fa fa-plus	addChild
MenuItem3	menuitemDel	删除当前节点	fa fa-remove	del

如下图所示：

步骤2：将Menu控件绑定到DataTree

鼠标选中【datatreeMenu】控件，切换到Client Events事件列表，在onContextMenu事件上增加menuOper参数，如下图所示：

在onContextMenu事件编辑区中输入如下代码：

menuOper.show({
     position:{
         left:arg.event.pageX,
         top:arg.event.pageY
     }
});

步骤3：添加并配置Container

鼠标展开SplitPanel控件下的MainControl节点下的Container控件下，再添加一个Container控件，将右侧工作区切换到 Layout属性设置区中，将Container控件的Layout属性设置为hbox，并将其移动到FieldSet控件的上方：

步骤4：添加并配置Button

接下来在Container中添加4个Button控件，Button1~Button4，分别设置Button的属性如下：

Button	id	caption	iconClass	tags
Button1	buttonAdd	添加同级节点	fa fa-plus	add
Button2	buttonAddChild	添加下级节点	fa fa-plus	addChild
Button3	buttonDel	删除	fa fa-remove	del
Button4	buttonSave	保存	fa fa-external-link

步骤5：新增并配置UpdateAction

接下来保存数据需要添加UpdateAction控件，在【ViewConfig】节点下的【View】节点下添加UpdateAction控件，设置控件属性如下：

属性	值	说明
id	updateactionSave	控件的Id
dataResolver	menuService#saveAll	通过执行menuService这个bean中的saveAll方法对传递到后台的主从表数据进行持久化
executingMessage	正在保存...	当此Action正在执行时希望系统显示给用户的提示信息
successMessage	保存成功！	当此Action执行成功之后自动提示的信息。
hotkey	ctrl+s	执行此Action的热键

然后为UpdateAction添加子节点UpdateItem，绑定需要提交的DataSet数据集:

鼠标选中updateactionSave，在右侧【Dorado ToolBox】工作区的【Others】分类下面双击【UpdateItem】，设置属性如下：

属性	值	说明
dataSet	datasetMenu	实现DataSet数据采集

界面如下图所示：

步骤6：为buttonSave按钮绑定事件

在点击【buttonSave】控件时需要执行【updateactionSave】操作，因此需要设定按钮属性如下：

属性	值	说明
action	updateactionSave	通过绑定UpdateAction，点击按钮便执行UpdateAction操作

步骤7：利用控件标签为MenuItem和Button控件添加事件

鼠标选中【View】节点，切换到Client Events事件列表，在onReady事件编辑区中输入如下代码：

view.get("^add").addListener("onClick", function(self,arg,datatreeMenu){
    var currentNode = datatreeMenu.get("currentNode");
    if (!currentNode) {
        throw new dorado.Exception("请先点中一个树节点！");
    }
    
    var currentEntity = currentNode.get("data");
    currentEntity.createBrother({
        menuName : "<菜单名称>"
    });
});
view.get("^addChild").addListener("onClick", function(self,arg,datatreeMenu){
    var currentNode = datatreeMenu.get("currentNode");
    if (!currentNode) {
        throw new dorado.Exception("请先点中一个树节点！");
    }
    
    var currentEntity = currentNode.get("data");
    currentNode.expandAsync(function() {
        currentEntity.createChild("slMenuSet", {
            menuName : "<菜单名称>"
        });
    });
});
view.get("^del").addListener("onClick", function(self,arg,datatreeMenu,updateactionSave){
    var currentEntity = datatreeMenu.get("currentEntity");
    if (!currentEntity) {
        throw new dorado.Exception("请先点中一个树节点！");
    }
    currentEntity.remove();
    updateactionSave.execute();
});

到目前为止，View部分设置完毕，接下来需要准备后台服务。

Dorado 9 : 22.3.2.1 修改视图并添加控件

Attachments: