guns 关于 分类学习 二

分类上级显示的问题 主要修改 静态页面 和 info.js 对应请求接口写一个
如下：
1：修改静态页面
新增页面

<div>
                    <#input id="pName" name="上级" readonly="readonly" hidden="pid"

                    clickFun="DirInfoDlg.showDirectorySelectTree(); return false;"
                    style="background-color: #ffffff !important;"/>
                </div>
                <!-- 父级部门的选择框 -->
                <div id="parentDirectoryMenu" class="menuContent"
                     style="display: none; position: absolute; z-index: 200;">
                    <ul id="parentDirectoryMenuTree" class="ztree tree-box" style="width: 245px !important;"></ul>
                </div>

其他页面也可以 引用 <script src="${ctxPath}/static/..../dir/dir_info.js"></script> 并添加上述代码！
修改页面
对于引用的修改info.js 有三处

SiteInfoDlg.collectData = function() {
    this
    //.set('categoryId')
   // .set('categoryName')

}
//sunyuechao
SiteInfoDlg.setPidAndPname = function() {
    this.siteInfoData["categoryName"]=$("#pName").val();
    this.siteInfoData["categoryId"]=$("#pid").val();
}
/**
 * 提交修改
 */
SiteInfoDlg.editSubmit = function() {

    this.clearData();
    this.collectData();
    this.setPidAndPname();//sunyuechao
    //提交信息
    var ajax = new $ax(Feng.ctxPath + "/site/update", function(data){
        Feng.success("修改成功!");
        window.parent.Site.table.refresh();
        SiteInfoDlg.close();
    },function(data){
        Feng.error("修改失败!" + data.responseJSON.message + "!");
    });
    ajax.set(this.siteInfoData);
    ajax.start();
}

                <div>
                    <#input id="pName" name="上级" readonly="readonly" hidden="pid"
                    hiddenValue="${item.pid}" value="${pName}"
                    clickFun="DirInfoDlg.showDirectorySelectTree(); return false;"
                    style="background-color: #ffffff !important;"/>
                </div>
                <!-- 父级部门的选择框 -->
                <div id="parentDirectoryMenu" class="menuContent"
                     style="display: none; position: absolute; z-index: 200;">
                    <ul id="parentDirectoryMenuTree" class="ztree tree-box" style="width: 245px !important;"></ul>
                </div>

2 ：js 中的改写

var DirInfoDlg = {
    dirInfoData : {},
    zTreeInstance : null,//添加树形参数
};

//sunyuechao
/**
 * 点击部门ztree列表的选项时
 *
 * @param e
 * @param treeId
 * @param treeNode
 * @returns
 */
DirInfoDlg.onClickDirectory = function (e, treeId, treeNode) {
    $("#pName").attr("value", DirInfoDlg.zTreeInstance.getSelectedVal());
    $("#pid").attr("value", treeNode.id);
}
//sunyuechao
/**
 * 显示部门选择的树
 *
 * @returns
 */
//sunyuechao
DirInfoDlg.showDirectorySelectTree = function () {
    var pName = $("#pName");
    var pNameOffset = $("#pName").offset();
    $("#parentDirectoryMenu").css({
        left: pNameOffset.left + "px",
        top: pNameOffset.top + pName.outerHeight() + "px"
    }).slideDown("fast");

    $("body").bind("mousedown", onBodyDown);
}
//sunyuechao
function onBodyDown(event) {
    if (!(event.target.id == "menuBtn" || event.target.id == "parentDirectoryMenu" || $(
        event.target).parents("#parentDirectoryMenu").length > 0)) {
        DirInfoDlg.hideDirectorySelectTree();
    }
}
//sunyuechao
/**
 * 隐藏部门选择的树
 */
DirInfoDlg.hideDirectorySelectTree = function () {
    $("#parentDirectoryMenu").fadeOut("fast");
    $("body").unbind("mousedown", onBodyDown);// mousedown当鼠标按下就可以触发，不用弹起
}
//sunyuechao
$(function() {
    var ztree = new $ZTree("parentDirectoryMenuTree", "/dir/tree");
    ztree.bindOnClick(DirInfoDlg.onClickDirectory);
    ztree.init();
    DirInfoDlg.zTreeInstance = ztree;
});

3： 接口

    /**
     * 获取部门的tree列表(sunyuechao)
     */
    @RequestMapping(value = "/tree")
    @ResponseBody
    public List<ZTreeNode> tree() {
        List<ZTreeNode> tree = this.dirService.tree();
        tree.add(ZTreeNode.createParent());
        return tree;
    }

Mapper

    <select id="tree" resultType="com.stylefeng.guns.core.node.ZTreeNode">
        select id,pid as pId,simplename as name,
        (
        CASE
        WHEN (pId = 0 OR pId IS NULL) THEN
        'true'
        ELSE
        'false'
        END
        ) as isOpen from syc_dir
    </select>

最后就显示出来了 也可以在别的 页面调用
补充：
增加方法 让增加和修改的时候 能让pids 按这样格式写 [0],[24],（从业务逻辑看，暂时没什么大用）

    /**
     * 根据父分类ID 书写分类内容 ,并格式[]
     * @param dire
     */
    private void directorySetPids(Dir dire) {
        if (ToolUtil.isEmpty(dire.getPid()) || dire.getPid().equals(0)) {
            dire.setPid(0);
            dire.setPids("[0],");
        } else {
            int pid = dire.getPid();
            Dir temp = dirService.selectById(pid);
            String pids = temp.getPids();
            dire.setPid(pid);
            dire.setPids(pids + "[" + pid + "],");
        }
    }

在增加和修改的接口上 判断并 增加此功能
新增

    /**
     * 新增分类管理
     */
    @RequestMapping(value = "/add")
    @ResponseBody
    public Object add(Dir dir) {
        // //完善pids,根据pid拿到pid的pids添加[]
        if (ToolUtil.isOneEmpty(dir, dir.getSimplename())) {
            System.out.println("add is 相同");
            throw new GunsException(BizExceptionEnum.REQUEST_NULL);
        }
        directorySetPids(dir);
        ////
        dirService.insert(dir);
        return SUCCESS_TIP;
    }

修改

    /**
     * 修改分类管理
     */
    @RequestMapping(value = "/update")
    @ResponseBody
    public Object update(Dir dir) {
        //完善pids,根据pid拿到pid的pids添加[]
        if (ToolUtil.isEmpty(dir) || dir.getId() == null) {
            throw new GunsException(BizExceptionEnum.REQUEST_NULL);
        }

        directorySetPids(dir);
        //
        dirService.updateById(dir);
        return SUCCESS_TIP;
    }

另外 在修改传回参数中 要加上pName 否则报错！

    /**
     * 跳转到修改分类管理
     */
    @RequestMapping("/dir_update/{dirId}")
    public String dirUpdate(@PathVariable Integer dirId, Model model) {
        Dir dir = dirService.selectById(dirId);
        model.addAttribute("item",dir);
        model.addAttribute("pName", dir.getSimplename());//原代码 有些不一样，测试看没什么大影响
        LogObjectHolder.me().set(dir);
        return PREFIX + "dir_edit.html";
    }

完毕！！