SSM入门项目-2-类目、图片、富文本

类目

1，简单分析一下该功能的EasyUI和js相关的内容

1.1，新增页面

<ul>
    <li data-options="attributes:{'url':'item-add'}">新增商品</li>
    <li data-options="attributes:{'url':'item-list'}">查询商品</li>
    <li data-options="attributes:{'url':'item-param-list'}">规格参数</li>
</ul>

对于一个不会js的人来说，我感到很无助，可以一起猜测一下。
通过contraller找到item-add.jsp。通过源码我们发现item-add.jsp是一段html片段，在这个片段中出发类目选择的条件代码如下

1.2，选择类目

<a href="javascript:void(0)" class="easyui-linkbutton selectItemCat">选择类目</a>

这里面定义了一个死链接，原因并不是特别清楚，这样可以出现a标签的引用效果（小手）。同时通过selectItemCat的class找到了commom.js中的方法

   // 初始化选择类目组件
    initItemCat : function(data){
   
        $(".selectItemCat").each(function(i,e){
   
            // 使用jQuery对象
            var _ele = $(e);
            if(data && data.cid){
                _ele.after("<span style='margin-left:10px;'>"+data.cid+"</span>");
            }else{
                _ele.after("<span style='margin-left:10px;'></span>");
            }
            _ele.unbind('click').click(function(){
   
                $("<div>").css({padding:"5px"}).html("<ul>")
                .window({
                    width:'500',
                    height:"450",
                    modal:true,
                    closed:true,
                    iconCls:'icon-save',
                    title:'选择类目',
                    onOpen : function(){
   
                        var _win = this;
                        $("ul",_win).tree({
                            url:'/item/cat/list',
                            animate:true,
                            onClick : function(node){
   
                                if($(this).tree("isLeaf",node.target)){
                                    // 填写到cid中
                                    _ele.parent().find("[name=cid]").val(node.id);
                                    _ele.next().text(node.text).attr("cid",node.id);
                                    $(_win).window('