[学习笔记]-ligerui 工具条，树结构，右键菜单，弹框

基本效果图

 

 

 

 

解析1，工具栏

 

html

<div id="toptoolbar"></div>

 

JS

$("#toptoolbar").ligerToolBar({
                items: [
                    { text: '保存', click: toobaritemclick, icon: 'add' },
                    { line: true }
                ]
            });

 

解析2,树右键菜单

menu = $.ligerMenu({
                top: 100, left: 100, width: 120, items:
               [
               { text: '增加', click: menuitemclick },
               { text: '修改', click: menuitemclick },
               { line: true },
               { text: '查看', click: menuitemclick },
               { text: '删除', click: menuitemclick }
               ]
            });

loadOrgtree();//加载树

//修改树的右键菜单

 $("#tree1").ligerTree({

                onContextmenu: function (node, e) {
                    menuNodeID = node.data.id;
                    menuNodeParentID = node.data.parentid;
                    menuNodeText = node.data.text;
                    menu.show({ top: e.pageY, left: e.pageX });
                    return false;
                }
            });

 

 

 

模式化窗体样式

<td class="td_left">上级组织:
            </td>
            <td>
                <input id="ParentOrgNew" name="ParentOrgNew" style="width: 185px;" type="text" />
            </td>

 

$("#ParentOrgNew").ligerPopupEdit({
                width: 185,
                onButtonClick: function () {
                    openDialog();//打开模式化窗体
                }

            });

 

 

function openDialog() {
            var data = null;
            $.ligerDialog.open({
                url: 'dialog/orgdialog.aspx', height: 350, width: 400, title: '组织树', buttons:
                    [
                        {
                            text: '确定', onclick: function (item, dialog) {

                                var selectOrg = dialog.menuname;//回传值
                                menuNodeParentID = dialog.menuid;
                                //$("#ParentOrgNew").ligerGetTextBoxManager().setValue(selectOrg);
                                $("#ParentOrgNew").val(selectOrg);
                                dialog.close()
                            }
                        },
                        { text: '取消', onclick: function (item, dialog) { dialog.close(); } }
                    ],
                data: $("#maingrid")
            });
        }

 

打开界面的返回值设置

window.onload = showDialogData;

function showDialogData() {
            if (dialog == null) return;
        }

        var dialog = frameElement.dialog;

manager = $("#tree1").ligerGetTreeManager();
            $("#tree1").ligerTree({
                onSelect: function (node, e) {
                    dialog.menuid = node.data.id;
                    dialog.menuname = node.data.text;//传过去的的值
                }
            });