easyUI 節點樹選擇

定義：

<input id="treeFFatherId" name="treeFFatherId" value="" style="width:320px;">
                        @*<input class="easyui-combotree" id="treeFFatherId" name="treeFFatherId"*@
                        @*data-options="url: '/Mes/PmcBillofMaterial/GetBomTree?id=1304',lines:true" style="width:170px;height:22px;" />*@
                        <img style="cursor: pointer; vertical-align: middle;" onclick="$('#treeFFatherId').combotree('clear');"
                             alt="清空父節點" title="清空父節點" src="~/Content/themes/icon/edit-clear.png" />

打開新增界面時，初始化控件欄

            onLoad: function () {
                //節點樹選擇
                $('#treeFFatherId').combotree({
                    url: '/Mes/PmcBillofMaterial/GetBomTree?id=' + row[0].Id,
                    required: false
                });
            },

後臺JSON格式：

public ActionResult GetBomTree(string id)
        {
            int TopId = string.IsNullOrEmpty(id) == true ? 0 : Convert.ToInt32(id);

            List<vPmcBillofMaterial> list = _vPmcBillofMaterialService.Find(t => t.TopId == TopId).ToList();

            System.Text.StringBuilder str = new System.Text.StringBuilder();
            if (list.Count > 0)
            {
                DataTable dt = DatabaseConvert.ListToDataTable<vPmcBillofMaterial>(list);
                if (dt != null)
                {
                    str.Append(Recursion(dt, 0));
                    str = str.Remove(str.Length - 2, 2);
                }
            }
            return Content(str.ToString());
        }
    ///遞歸：
    private string Recursion(DataTable dt, object parentId)
        {
            System.Text.StringBuilder sbJson = new System.Text.StringBuilder();
            DataRow[] rows = dt.Select("FatherId = " + parentId);
            if (rows.Length > 0)
            {
                sbJson.Append("[");
                for (int i = 0; i < rows.Length; i++)
                {
                    string childString = Recursion(dt, rows[i]["Id"]);
                    if (!string.IsNullOrEmpty(childString))
                    {
                        //comboTree必須設置【id】和【text】，一個是id一個是顯示值
                        sbJson.Append("{\"id\":\"" + rows[i]["Id"].ToString() + "\",\"ParentId\":\"" + rows[i]["FatherId"].ToString() + "\",\"MaterialId\":\"" + rows[i]["MaterialId"].ToString() + "\",\"UpdateBy\":\"" + rows[i]["UpdateBy"].ToString() + "\",\"UpdateTime\":\"" + rows[i]["UpdateTime"].ToString() + "\",\"text\":\"" + rows[i]["ChildK3MaterialNumber"].ToString() + "(" + rows[i]["ChildMaterialName"].ToString() + ")" + "\",\"children\":");
                        sbJson.Append(childString);
                    }
                    else
                        sbJson.Append("{\"id\":\"" + rows[i]["Id"].ToString() + "\",\"ParentId\":\"" + rows[i]["FatherId"].ToString() + "\",\"MaterialId\":\"" + rows[i]["MaterialId"].ToString() + "\",\"UpdateBy\":\"" + rows[i]["UpdateBy"].ToString() + "\",\"UpdateTime\":\"" + rows[i]["UpdateTime"].ToString() + "\",\"text\":\"" + rows[i]["ChildK3MaterialNumber"].ToString() + "(" + rows[i]["ChildMaterialName"].ToString() + ")" + "\"},");
                }
                sbJson.Remove(sbJson.Length - 1, 1);
                sbJson.Append("]},");
            }
            return sbJson.ToString();
        }

 

 

完整dialog

function AddBomNode()
    {
        var row = $("#ui_grid1").datagrid("getChecked");
        if (row.length < 1) {
            $.show_alert("提示", "請先勾選要添加節點的物料主文件");
            return;
        }
        if (row.length > 1) {
            $.show_alert("提示", "不容許批量添加節點");
            $("#ui_grid1").datagrid('clearSelections').datagrid('clearChecked');
            return;
        }
        $("<div/>").dialog({
            id: "ui_PmcBillofMaterial_bom_add_dialog",
            href: "/Mes/PmcBillofMaterial/BomNodeAdd",
            title: "新建",
            height: 300,
            width: 600,
            modal: true,
            buttons: [{
                id: "ui_PmcBillofMaterial_bom_add_btn",
                text: '保 存',
                iconCls: 'icon-save',
                handler: function () {
                    $("#BomNodeAddForm").form("submit", {
                        url: "/Mes/PmcBillofMaterial/AddBomNode",
                        onSubmit: function (param) {
                            //注：加個F標記，防衝突
                            //param.FId = $("#hidid").val();
                            var parentid = $("#treeFFatherId").combotree("getValues").toString();
                            param.FFatherId = parentid;
                            param.FTopId = row[0].Id;                       //物料ID
                            param.FMaterialId = $("#hidFMaterialId").val(); //物料ID
                            param.FBomQty = $("#txtFBomQty").val();
                            param.FLossRate = $("#txtFLossRate").val();
                            param.FBomState = $("#selFBomState").val();
                            param.FBomInfoState = $("#txtFBomInfoState").val();
                            //param.FWorkshop = $("#txtFWorkshop").val();
                            //param.FWarehouse = $("#txtFWarehouse").val();
                            
                            param.FRemark = $("#txtFRemark").val();
                            //param.FIsEnabled = document.getElementById("rbFIsEnabled").checked;

                            if ($(this).form('validate')) {
                                $('#ui_PmcBillofMaterial_bom_add_btn').linkbutton('disable');
                                return true;
                            }
                            else {
                                $('#ui_PmcBillofMaterial_bom_add_btn').linkbutton('enable');   //恢復按鈕
                                return false;
                            }
                        },
                        success: function (data) {
                            var dataJson = eval('(' + data + ')');
                            if (dataJson.success) {
                                $("#ui_PmcBillofMaterial_bom_add_dialog").dialog('destroy');
                                $.show_alert("提示", dataJson.msg);
                                $("#ui_grid2").datagrid("reload").datagrid('clearSelections').datagrid('clearChecked');
                                $("#ui_grid3").datagrid("reload").datagrid('clearSelections').datagrid('clearChecked');
                            } else {
                                $('#ui_PmcBillofMaterial_bom_add_btn').linkbutton('enable');
                                $.show_alert("提示", dataJson.msg);
                            }
                            //$("#bomTree").tree('reload', parentId.target);
                            $("#bomTree").tree('reload');
                        }
                    });
                }
            }, {
                text: '取 消',
                iconCls: 'icon-cancel',
                handler: function () {
                    $("#ui_PmcBillofMaterial_bom_add_dialog").dialog('destroy');
                }
            }],
            //打開新增界面時，初始化控件欄
            onLoad: function () {
                //$("#hidid").val(row[0].Id);
                //若是節點爲空，則默認物料ID爲當前物料主文件選中行；
                var roots = $('#bomTree').tree('getRoots');
                if (roots.length <= 0) {
                    var strMaterial = row[0].K3MaterialNumber + '(' + row[0].MaterialName + ')';
                    $('#hidFMaterialId').val(row[0].Id);
                    $('#txtFMaterialId').val(strMaterial);
                    $('#txtFMaterialId').focus();
                } else { $('#txtFBomQty').focus(); }

                //節點樹選擇
                $('#treeFFatherId').combotree({
                    url: '/Mes/PmcBillofMaterial/GetBomTree?id=' + row[0].Id,
                    required: false
                });
            },
            onClose: function () {
                $("#ui_PmcBillofMaterial_bom_add_dialog").dialog('destroy');  //銷燬dialog對象
            }
        });
    }

View Code