easyui拖拽上下移动增删改查

最近帮朋友写了一个easyui拖拽上下移动增删改查功能，分享一下，顺便做个备忘。

效果如下：

源码下载 

JS代码如下：

实现拖拽核心js文件page-ctObserver.js为：

 $(function() {    
    $("#data-list").treegrid({
        title : '分类表',
        url : getRootPath()+'/ctObserver/dataList.do',
        idField : "classify_id",
        treeField:"classify_name",
        title : "分类列表",
        // panelHeight:700,
        rownumbers: true,
        autoRowHeight:true,
        collapsible:true,
        loadMsg: '正在加载中，请稍等... ',
        nowrap : true,
        fit:true,
        striped:true,// 隔行变色,
        animate: true,
        columns : [ [ {
            field : 'classify_name',
            title : '分类名称',
            sortable : true    ,
            resizable:true,
            width:150
        }, {
            field : 'classify_grade',
            title : '类别等级',
            align : 'center',
            sortable : true,
            resizable:true,
            width:100,
            formatter:function(value,row,index){
                if(value == 1){
                    return "一级";
                }
                if(value == 2) {
                    return "二级";
                }
                if(value == 3) {
                    return "三级";
                }
                if(value == 4) {
                    return "四级";
                }
            }
        },{
            field : 'create_time',
            title : '创建时间',
            align : 'center',
            sortable : true,
            width:150
        },{
            field : 'sortCode',
            title : '排序',
            align : 'center',
            sortable : true,
            width:150
        }
        ] ],
        onLoadSuccess: function(row){
            //$(this).treegrid('tuoZhuai', row?row.id:null);
           //上面的代码是demo中的，但是对于要保存更改到数据库显然走不通，需要向其他办法

           //启用拖动排序
            tuoZhuai($('#data-list'));
        },   
        onContextMenu: function(e,row){
            
            if(row.classify_grade == 1){
                e.preventDefault();    
                $(this).treegrid('unselectAll');    // 清除所有选中项
                $(this).treegrid('select', row.classify_id);    // 选中状态
                $("#treeParentId").val(row.classify_id);
                $('#djfl1').menu('show', {
                    left: e.pageX,
                    top: e.pageY
                });
            }
            if(row.classify_grade == 2){
                e.preventDefault();    
                $(this).treegrid('unselectAll');    // 清除所有选中项
                $(this).treegrid('select', row.classify_id);    // 选中状态
                $('#djfl3').menu('show', {
                    left: e.pageX,
                    top: e.pageY
                });
            }
            if(row.classify_grade == 3){
                e.preventDefault();    
                $(this).treegrid('unselectAll');    // 清除所有选中项
                $(this).treegrid('select', row.classify_id);    // 选中状态
                $('#djfl4').menu('show', {
                    left: e.pageX,
                    top: e.pageY
                });
            }
            if(row.classify_grade == 4){
                e.preventDefault();    
                $(this).treegrid('unselectAll');    // 清除所有选中项
                $(this).treegrid('select', row.classify_id);    // 选中状态
                $('#djfl5').menu('show', {
                    left: e.pageX,
                    top: e.pageY
                });
            }
        },toolbar:[{
            id:'three',
            text:'上移',
            iconCls:'icon-add',
            handler:function(){
                var n = $("#data-list").treegrid("getSelected");if(n==null){alert("无法移动！");return;};
                var selectRow = $('#datagrid-row-r1-2-'+n.classify_id);
                    var preId = selectRow.prev("tr").attr("node-id");//上级id
                    if(typeof(preId)=="undefined" || preId.indexOf("L")==0) {
                        alert("无法移动！");
                    }else {//下面写数据库中的排序逻辑
                        $.post(getRootPath()+'/ctObserver/updateId.do',{"id1":n.classify_id,"id2":preId,"id1Code":n.sortCode},function(data) {
                            if(data.success) {
                                var n2 = $("#data-list").treegrid("pop",n.classify_id);
                                $("#data-list").treegrid("insert",{before:preId,data:n2});
                                $("#data-list").treegrid("select",n.classify_id);
                            }else {
                                alert("移动过程出现异常，请稍后再试");
                            }
                        });
                    }
                
            }
        },{
            id:'Two',
            text:'下移',
            iconCls:'icon-add',
            handler:function(){
                var n = $("#data-list").treegrid("getSelected");if(n==null){alert("无法移动！");return;};
                var selectRow = $('#datagrid-row-r1-2-'+n.classify_id);
                var next = selectRow.next();//此处获得下一节点，关键
                //alert(next.attr("node-id"));return;
                if(typeof(next.attr("node-id"))=="undefined" || next.attr("node-id").indexOf("L")==0) {
                    alert("无法移动！")
                }else {
                    var nextId = next.attr("node-id");
                    $.post(getRootPath()+'/ctObserver/updateId.do',{"id1":n.classify_id,"id2":nextId,"id1Code":n.sortCode},function(data) {
                        if(data.success) {
                            var n2 = $("#data-list").treegrid("pop",nextId);
                            $("#data-list").treegrid("insert",{before:n.classify_id,data:n2})
                        }else {
                            alert("移动过程出现异常，请稍后再试");
                        }
                    });
                }
            }
        },{
            id:'one',
            text:'增加一级分类',
            iconCls:'icon-add',
            handler:function(){
                $('#edit-win').show().dialog({
                    title: '分类信息',
                    width:450,
                    height:300,
                    modal: true,
                    maximizable:true,
                    resizable:true
                    
                }).dialog("open").dialog('refresh');    
            }
        }]
        
    });
    // 给select赋值
    $('#classifyname').combobox({
           url: getRootPath()+'/ctObserver/getClassifyName.do?classify_grade=1',
           valueField: 'classify_id',
           textField: 'classify_name',
           panelHeight:'auto',// 面板自动高度
           panelWidth: 142,// 面板宽度
           width:142,// select宽度
           editable:true,
           
        });
        
    // 查询事件
    $("#btn-search").click(function(){
        $.ajax({
            url : getRootPath()+'/ctObserver/dataList.do',
            data: $("#searchForm").serialize(),
            cache:false , 
            dataType:'json',
            type:'post',
            success: function(data){
                $("#data-list").treegrid("loadData",data);
            }
        });
    });
    $.ajax({
        url:getRootPath()+'/allSpec/getSpecName.shtml?spec_grade='+805,
         dataType:"json",
         success:function(result){
           var newjson = [];
           for(var i = 0;i<result.length;i++){
               newjson.push({"spec_id":result[i].spec_id,"spec_name":result[i].spec_name+"("+result[i].affiliated_number+result[i].affiliated_spec+"/"+result[i].spec_name+")"});
           }
           $('#spec_idFour').combobox({
                data : newjson,
                panelHeight : 'auto',
                width : 100,
                editable : true,
                valueField : 'spec_id',
                textField : 'spec_name',
                panelHeight:'150',//面板自动高度
                panelWidth: '130',//面板宽度
//                onChange : function(newValue, oldValue) {
//                    if(newValue!='999'){
//                        $('#affiliated_number').textbox({'disabled':false});
//                    }else{
//                        $('#affiliated_number').textbox({'disabled':true});
//                    }
//                }
        
           })
           
         }

    });    
    
});
 function tuoZhuai(t) {
     var nodes = t.treegrid('getPanel').find('tr[node-id]');
     nodes.find('span.tree-hit').bind('mousedown.treegrid', function() {
         return false;
     });
     nodes.draggable({
         disabled: false,
         revert: true,
         cursor: 'pointer',
         proxy: function(source) {
             var p = $('<div class="tree-node-proxy tree-dnd-no"></div>').appendTo('body');
             p.html($(source).find('.tree-title').html());
             p.hide();
             return p;
         },
         deltaX: 15,
         deltaY: 15,
         onBeforeDrag: function() {
             $(this).next('tr.treegrid-tr-tree').find('tr[node-id]').droppable({ accept: 'no-accept' });
         },
         onStartDrag: function() {
             $(this).draggable('proxy').css({
                 left: -10000,
                 top: -10000
             });
         },
         onDrag: function(e) {
             $(this).draggable('proxy').show();
             this.pageY = e.pageY;
         },
         onStopDrag: function() {
             $(this).next('tr.treegrid-tr-tree').find('tr[node-id]').droppable({ accept: 'tr[node-id]' });
         }
     }).droppable({
         accept: 'tr[node-id]',
         onDragOver: function(e, source) {
             var pageY = source.pageY;
             var top = $(this).offset().top;
             var bottom = top + $(this).outerHeight();
             $(source).draggable('proxy').removeClass('tree-dnd-no').addClass('tree-dnd-yes');
             $(this).removeClass('row-append row-top row-bottom');
             if (pageY > top + (bottom - top) / 2) {
                 if (bottom - pageY < 5) {
                     $(this).addClass('row-bottom');
                 } else {
                     $(this).addClass('row-append');
                 }
             } else {
                 if (pageY - top < 5) {
                     $(this).addClass('row-top');
                 } else {
                     $(this).addClass('row-append');
                 }
             }
         },
         onDragLeave: function(e, source) {
             $(source).draggable('proxy').removeClass('tree-dnd-yes').addClass('tree-dnd-no');
             $(this).removeClass('row-append row-top row-bottom');
         },
         onDrop: function(e, source) {
             var node = $("#data-list").treegrid("getSelected");    
             var action, point;
             if ($(this).hasClass('row-append')) {
                 action = 'append';
             } else {
                 action = 'insert';
                 point = $(this).hasClass('row-top') ? 'top' : 'bottom';
             }
             $(this).removeClass('row-append row-top row-bottom');           
              //==================================
              //做自己的逻辑处理
             var src  = $('#data-list').treegrid('find', $(source).attr('node-id'));//获取拖拽的id
             var dest = $('#data-list').treegrid('find', $(this).attr('node-id'));//获取推拽到那个地方id
             //先判断是否是同级别，如果不是才请求后台
             var srcParent=src.parent_id;
             var destParent=dest.parent_id;
             if(srcParent==destParent){
                 $.messager.show({
                        title:'提示',
                        msg:'您是在同级类别操作，类别将不会改变',
                        timeout:2000,
                        showType:'slide'});
                 return;
             }else{
                 $.ajax({
                     url: getRootPath()+'/ctObserver/fenLeiTZ.do',
                     dataType: 'json',
                     type:'post',
                     data: {
                         "srcId": src.classify_id,
                         "destId": dest.classify_id,
                         "destParentId":dest.parent_id,
                         "destClassifyGrade":dest.classify_grade//等级
                     },
                     success:function(data){
                         if(data.success)
                         {
                             $.messager.alert('提示','变更成功');
                            // $('#data-list').treegrid('reload');    //重新加载treegrid
                            //刷新指定行
                             $("#data-list").treegrid("reload",node.classify_id);
                             $("#data-list").treegrid("reload",node.parent_id);
                        }
                     }
                 
                 });
             }

         }
     });
 }
// 增加分类
function append(grade){        
    // 1清空表单数据
    $('#editForm').form('reset');
    var node = $("#data-list").treegrid("getSelected");    
    $(":input[name='classify_id']").val(node.classify_id);
    $(":input[name='grade']").val(grade);
    $(":input[name='updStat']").val(0);
    $(":input[name='parent_id']").val(node.parent_id);
    // 2打开窗口
    $('#edit-win').dialog('open');
}
// 保存数据
$("#btnSave").click(function(){
    if( $("#editForm").form('validate')){
    $.ajax({
        url:getRootPath()+'/ctObserver/save.do',
        data:$('#editForm').serialize(),
        cache:false , 
        dataType:'json',
        type:'post',
        success: function(data){
            if(data.success){
                $('#edit-win').dialog('close');
                //只刷新选中的行
                var node = $("#data-list").treegrid("getSelected");
                if(node.classify_grade=="1" || node==null){
                    $('#data-list').treegrid('reload');
                }else{
                    //刷新指定行
                    $("#data-list").treegrid("reload",node.classify_id);
                    $("#data-list").treegrid("reload",node.parent_id);
                }
                successTip();
            }
            $("#btnSave").attr("disabled",true);
        },
        error:function(data){
            errorTip();
        }
    });
    }else{
        successTip();
    }
});
// 修改分类
function update(){    
    $('#editForm').form('reset');
    var node = $("#data-list").treegrid("getSelected");
    $(":input[name='classify_id']").val(node.classify_id);
    $(":input[name='classify_name']").val(node.classify_name);
    $(":input[name='updStat']").val(1);
    $('#edit-win').dialog('open');
}

// 删除数据
function remove(){
    var node = $("#data-list").treegrid("getSelected");
    $.messager.confirm('Confirm','你确定要删除吗?',function(r){
        if (r){
            //查询是否有子节点
            $.ajax({
                url:getRootPath()+'/ctObserver/del.do?id='+node.classify_id,
                data:$('#editForm').serialize(),
                cache:false , 
                dataType:'json',
                type:'post',
                success: function(data){
                    if(data==1){
                        $.messager.confirm('Confirm','删除后子节点也会全部删除，您确定要删除吗?',function(a){
                            if(a){
                                //查询是否有子节点
                                $.ajax({
                                    url:getRootPath()+'/ctObserver/delete.do?id='+node.classify_id,
                                    data:$('#editForm').serialize(),
                                    cache:false , 
                                    dataType:'json',
                                    type:'post',
                                    success: function(data){
                                            //只刷新选中的行
                                            var node = $("#data-list").treegrid("getSelected");
                                            if(node.classify_grade=="1"){
                                                $('#data-list').treegrid('reload');
                                            }else{
                                                //刷新上级节点
                                                $("#data-list").treegrid("reload",node.parent_id);
                                            }
                                            successTip();
                                        
                                    },
                                    error:function(data){
                                        errorTip();
                                    }
                                });
                            }
                        });
                    }else{
                        $.ajax({
                            url:getRootPath()+'/ctObserver/delete.do?id='+node.classify_id,
                            data:$('#editForm').serialize(),
                            cache:false , 
                            dataType:'json',
                            type:'post',
                            success: function(data){
                                var node = $("#data-list").treegrid("getSelected");
                                    //只刷新选中的行
                                    if(node.classify_grade=="1"){
                                        $('#data-list').treegrid('reload');
                                    }else{
                                        //刷新上级节点
                                        $("#data-list").treegrid("reload",node.parent_id);
                                    }
                                    successTip();
                                
                            },
                            error:function(data){
                                errorTip();
                            }
                        });
                    }
                },
                error:function(data){
                    errorTip();
                }
            });
        }

    });

}
//规格树
function showTree() {
    var node = $("#data-list").datagrid("getSelected");
    $('#edit-winTwo').dialog({
        title: '规格',
        modal: true,
        maximizable:true,
        resizable:true,
        buttons:[{
            text:'添加',
            handler:function(){
                if( $("#editFormTwo").form('validate')){
                $.ajax({
                    url:getRootPath()+'/ctObserver/save.do?classify_id='+node.classify_id,
                    data:$('#editFormTwo').serialize(),
                    cache:false , 
                    dataType:'json',
                    type:'post',
                    success: function(data){
                        var node = $("#data-list").treegrid("getSelected");
                        //只刷新选中的行
                        if(node.classify_grade=="1"){
                            $('#data-list').treegrid('reload');
                        }else{
                            //刷新上级节点
                            $("#data-list").treegrid("reload",node.parent_id);
                        }
/*                        $('#data-list').treegrid('reload');
                        //$('#data-list').datagrid('load'),//自动刷新
                        $('#data-list').treegrid('unselectAll');*/
                        $('#edit-winTwo').dialog('close');
                        successTip();
                    },
                    error:function(data){
                        errorTip();
                    }
                });
            }
            }}],
    }).dialog('refresh').dialog('open');
    $.ajax({
        url:getRootPath()+'/ctObserver/getSpecId.do',
        data:{"classify_id":node.classify_id},
        cache:false, 
        dataType:'json',
        type:'post',
        success: function(r){
            $('#editFormTwo').form('load',r.data);
            
        },
        error:function(data){
            errorTip();
        }
    });
    
    
     }
function add(){
    // 1清空表单数据
    $('#editFormThree').form('reset');
    var node = $("#data-list").treegrid("getSelected");
    $("#classId").val(node.classify_id);
    $.ajax({
        url:getRootPath()+'/ctObserver/getId.do',
        data:{"classify_id":node.classify_id},
        cache:false , 
        dataType:'json',
        type:'post',
        success: function(data){
            $("#picture_url2").attr("src",data.picture_url);
            
        },
        error:function(data){
            errorTip();
        }
    });
    
    // 2打开窗口
    $('#edit-winThree').dialog('open');
}
//增加商品规格参数
function addParam(){
    $('#paramete_name_id').combobox('clear');//防止多选的时候开头出现逗号的问题
    // 1清空表单数据
    //$('#editFormFive').form('reset');
    var node = $("#data-list").treegrid("getSelected");
    $("#classIdFive").val(node.classify_id);
    $.ajax({
        url:getRootPath()+'/ctObserver/getId.do',
        data:{"classify_id":node.classify_id},
        dataType:'json',
        type:'post',
        success: function(r){
            $('#editFormFive').form('load',r);
        },
        error:function(data){
            errorTip();
        }
    });
    
    // 2打开窗口
    $('#edit-winFive').dialog('open');
}
//保存商品规格参数
$("#btnSaveFive").click(function(){
    var vals=$('#paramete_name_id').combobox('getValues');
    var classify_id=$('#classIdFive').val();
    $.ajax({
        url:getRootPath()+'/ctObserver/save.do',
        data:{"paramete_name_id":vals,"classify_id":classify_id},
        cache:false , 
        dataType:'json',
        type:'post',
        success: function(r){
            if(r.success){
                $('#edit-winFive').dialog('close');
                //只刷新选中的行
                var node = $("#data-list").treegrid("getSelected");
                    //刷新指定行
                    $("#data-list").treegrid("reload",node.classify_id);
                    $("#data-list").treegrid("reload",node.parent_id);
                
                    successTip();
            }
        },
        error:function(data){
            errorTip();
        }
    });
});
//保存类别图片
$("#btnSaveThree").click(function(){
    var formData = new FormData($("#editFormThree")[0]);
    $.ajax({
        url:getRootPath()+'/ctObserver/savePicture.do',
        data:formData,
        cache:false , 
        dataType:'json',
        type:'post',
        processData: false,
        contentType: false,
        success: function(data){
            if(data.success){
                $('#edit-winThree').dialog('close');
                //只刷新选中的行
                var node = $("#data-list").treegrid("getSelected");
                    //刷新指定行
                    $("#data-list").treegrid("reload",node.classify_id);
                    $("#data-list").treegrid("reload",node.parent_id);
                
                    successTip();
            }
        },
        error:function(data){
            errorTip();
        }
    });
});
//取消按钮
$("#btnCancleThree").click(function(){
    $('#edit-winThree').dialog('close');
    
});
$("#btnCancle").click(function(){
    $('#edit-win').dialog('close');
    
});
$("#btnCancleFive").click(function(){
    $('#edit-winFive').dialog('close');
    
});
// 处理成功提示函数
function successTip(){
    $.messager.show({
        title:'提示',
        msg:'操作成功',
        timeout:2000,
        showType:'slide'
    });
}
// 处理失败提示函数
function errorTip(){
    $.messager.show({
        title:'提示',
        msg:'操作失败，请联系管理员',
        timeout:2000,
        showType:'slide'
    });
}
//excel导入
function excelDR(){
    if($("#uploadExcel").val()==null || $("#uploadExcel").val()==""){
        $.messager.alert("提示信息","请上传文件");
        return;
    }
    $('#excelForm').ajaxSubmit({    
        url:getRootPath()+'/ctObserver/addExcel.do',
        dataType: 'json',
        success: function(data){
            if(data=="1"){
                $.messager.alert("提示信息","导入成功");
                $('#excel-win').dialog('close');
                var Grid = $('#data-list');
                //Form
                var Form = {
                            search:$("#searchForm")}
                var param = Form.search.serializeObject();
                Grid.datagrid('reload',param);
            }else{
                $.messager.alert("提示信息","导入失败");
            }
        }, 
    });
}

//等级
$('#classify_grade').combobox({
    valueField: 'label',
    textField: 'value',
    data: [{
        label: '1',
        value: '一级'
    },{
        label: '2',
        value: '二级'
    },{
        label: '3',
        value: '三级'
    }],
    panelHeight:'auto',// 面板自动高度
    panelWidth: 80,// 面板宽度
    width:80,// select宽度
    onSelect:function(){
    }
});
//清空查询
$("#clear-button").click(function(){
    $('#classifyname').combobox('setValue','');
    $("#data-list").treegrid("load");
});
 

page-allSpec.js文件为：

allSpec = function(){
    var _box = null;
    var _this = {
        config:{
            event:{
                add:function(){
                    $('#typeIds_combobox').combobox('reload');
                    _box.handler.add();
                },
                edit:function(){
                    $('#typeIds_combobox').combobox('reload');
                    _box.handler.edit();
                }
            },
              dataGrid:{
                  title:'规格',
                   url:'dataList.do',
                   idField : "spec_id",
                   columns:[[
                    {field:'spec_id',checkbox:true},
                    {field:'spec_name',title:'规格名称',align:'center',sortable:true,
                            formatter:function(value,row,index){
                                return row.spec_name;
                            }
                        },
                    {field:'spec_grade',title:'等级',align:'center',sortable:true,
                            formatter:function(value,row,index){
                                if(value=="801"){
                                    return "一级规格";
                                }
                                if(value=="802"){
                                    return "二级规格";
                                }
                                if(value=="803"){
                                    return "三级规格";
                                }
                                if(value=="804"){
                                    return "最小规格";
                                }
                                if(value=="805"){
                                    return "四级规格";
                                }
                            }
                        },
                        {field:'gg',title:'最小规格',align:'center',sortable:true,
                            formatter:function(value,row,index){
                                return row.affiliated_number+row.affiliated_spec+"/"+row.spec_name;
                            }
                        },
                        {field:'create_time',title:'创建时间',align:'center',sortable:true,
                            formatter:function(value,row,index){
                                return row.create_time;
                            }
                        },
                    {field:'create_time',title:'创建时间',align:'center',sortable:true,
                            formatter:function(value,row,index){
                                return row.create_time;
                            }
                        },
                    {field:'change_time',title:'修改时间',align:'center',sortable:true,
                            formatter:function(value,row,index){
                                return row.change_time;
                            }
                        },
                    ]],
                    toolbar:[
                                 {id:'btnadd',text:'添加',btnType:'add'},
                                {id:'btnedit',text:'修改',btnType:'edit',
                                     handler:function(){
                                         var selected = _box.utils.getCheckedRows();
                                        var spec_id=selected[0].spec_id;
                                        if ( _box.utils.checkSelectOne(selected)){
                                            $('#edit-win').dialog({
                                                title: '商品信息',
                                                modal: true,
                                                maximizable:true,
                                                buttons:[{
                                                    text:'修改',
                                                    handler:function(){
                                                        console.log($('#editForm').serialize());
                                                        $.ajax({
                                                            url:getRootPath()+'/allSpec/save.do',
                                                            type:"post",
                                                            dataType:"json",
                                                            data:$('#editForm').serialize(),
                                                            processData: false,
                                                            success:function(r){
                                                                $('#data-list').datagrid('reload');
                                                                $('#edit-win').dialog('close');
                                                                $.messager.alert('提示框!',r.msg);
                                                            }
                                                        });
                                                    }
                                                },{
                                                    text:'取消',
                                                    handler:function(){
                                                        $('#edit-win').dialog('close');
                                                    }
                                                }],
                                            }).dialog('refresh').dialog('open');
                                            //数据回显
                                            $.ajax({
                                                url:getRootPath()+'/allSpec/getId.do',
                                                type:"post",
                                                dataType:"json",
                                                data:{"spec_id":spec_id},
                                                success:function(r){
                                                    $('#editForm').form('load',r.data);
                                                    var grade = r.data.spec_grade;
                                                    if(grade=='805'){
                                                        document.getElementById('affiliated').style.display='';
                                                    }else{
                                                        document.getElementById('affiliated').style.display='none';
                                                    }
                                                }
                                            });
                                        }
                                     }
                                 },
                                {id:'btndelete',text:'删除',btnType:'remove'}
                            ]
            }
        },
        init:function(){
            _box = new YDataGrid(_this.config); 
            _box.init();
        }
    }
    return _this;
}();

$(function(){
    allSpec.init();
    $('#spec_grade').combobox({
           url: getRootPath()+'/allDictionary/getDictPub.do?code=800',
           valueField:'son_number',
           textField:'son_name',
           panelHeight:'auto',//面板自动高度
           panelWidth: 130,//面板宽度
           multiple:false,
           editable:true,
           onLoadSuccess: function () {
               var val = $(this).combobox("getData"); 
               for (var i=0;i<val.length;i++)
               {                                                          
                   if (val[i].son_number == r.data.parent_number) {
                    $(this).combobox("select", val[i].son_number);
                }
               }
              
              }
        });
    $.ajax({
        url: getRootPath()+'/allSpec/getSpecNameTwo.do?spec_grade=805',
         dataType:"json",
         success:function(result){
           var newjson = [];
           newjson.push({"spec_id":"999","spec_name":"所有"});
           for(var i = 0;i<result.length;i++){
               newjson.push({"spec_id":result[i].spec_id,"spec_name":result[i].spec_name});
           }
           $('#affiliated_spec').combobox({   

                data : newjson,
                panelHeight : 'auto',
                width : 100,
                editable : false,
                valueField : 'spec_id',
                textField : 'spec_name',
                panelHeight:'150',//面板自动高度
                panelWidth: '130',//面板宽度
                onChange : function(newValue, oldValue) {
                    if(newValue!='999'){
                        $('#affiliated_number').textbox({'disabled':false});
                    }else{
                        $('#affiliated_number').textbox({'disabled':true});
                    }
                }
        
           })
           
         }

    });    

});

JSP代码如下：

核心jsp文件ctObserver.jsp内容如下 ：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<%@include file="/view/resource.jsp"%>
<script charset="utf-8"
    src="<%=basePath%>/js/jquery-easyui-1.3.2/locale/datagrid-detailview.js"></script>
    <link rel="stylesheet" href="<%=basePath%>/js/pictureBig/css/bootstrap-grid.min.css">
    <link rel="stylesheet" href="<%=basePath%>/js/pictureBig/dist/zoomify.min.css">
    <link rel="stylesheet" href="<%=basePath%>/js/pictureBig/css/style.css">
</head> 
<body class="easyui-layout">
    <!-- Search panel start -->
    <div class="ui-search-panel" region="north" style="height: 80px;"
        title="过滤条件"
        data-options="striped: true,collapsible:false,iconCls:'icon-search',border:false">
        <form id="searchForm">
            <p class="ui-fields">
                <label class="ui-label">分类名称:</label><select id="classifyname"
                    class="easyui-combobox" name="id" style="width: 100px;"></select>
            </p>
            <a href="#" id="btn-search" class="easyui-linkbutton" iconCls="icon-search">查询</a>
            <a href="#" id="clear-button" class="easyui-linkbutton" iconCls="icon-search">重置</a>
        </form>
        
    </div>
    <!--  Search panel end -->

    <!-- Data List -->
    <div region="center" border="false">
        <table id="data-list"></table>
    </div>

    <!-- Edit Win&Form -->
    <div id="edit-win" class="easyui-dialog" title="Basic window"
        data-options="closed:true,iconCls:'icon-save',modal:true"
        style="width: 400px; height: 380px;">
        <form id="editForm" class="ui-form" method="post">
            <input class="hidden" name="classify_id">
            <!-- 用于判断是增加还是修改：增加 0：修改1 -->
            <input class="hidden" name=updStat value='0'>
            <!-- 用于判断增加几级分类 -->
            <input class="hidden" name="grade" value='1'>
            <input class="hidden" name="parent_id">
            <div class="ui-edit">
                <div class="ftitle">分类表</div>
                <div class="fitem">
                    <label>分类名称</label> <input name="classify_name" type="text"
                        maxlength="50" class="easyui-validatebox" data-options=""
                        missingMessage="请填写分类名称">
                </div>
                <div style="margin-top: 40px;">
                    <a id="btnSave" style="margin-left: 120px;"
                        class="easyui-linkbutton">确定</a> <a id="btnCancle"
                        style="margin-left: 30px;" class="easyui-linkbutton">取消</a>
                </div>

            </div>
        </form>
    </div>\
     <!-- Edit Form -->
     <div id="edit-winTwo" class="easyui-dialog" title="Edit" data-options="closed:true,iconCls:'icon-save',modal:true" style="width:370px;height:400px;">
              <form id="editFormTwo" class="ui-form" method="post">
              <div class="ui-edit">
              <div class="ftitle">规格选择</div>                
                <!-- <div class="fitem" >  
                   <label>一级规格</label>
                        <input id="spec_idOne" name="spec_idOne"
                        style="width: 150px" class="easyui-combobox"
                        data-options="
                                    url:getRootPath()+'/allSpec/getSpecName.shtml?spec_grade='+801,
                                    method:'get',
                                    valueField:'spec_id',
                                    textField:'spec_name',
                                    multiple:true,
                                    panelHeight:'200',
                                    editable:false">
                   
               </div>-->
               <!-- <div class="fitem">  
                   <label>二级规格</label>
                        <input id="spec_idTwo" name="spec_idTwo"
                        style="width: 150px" class="easyui-combobox"
                        data-options="
                                    url:getRootPath()+'/allSpec/getSpecName.shtml?spec_grade='+802,
                                    method:'get',
                                    valueField:'spec_id',
                                    textField:'spec_name',
                                    multiple:true,
                                    panelHeight:'150',
                                    editable:false">
                                    
                   
               </div>  -->
<!--                <div class="fitem" style="">
                   <label>三级规格</label>
                        <input id="spec_idThree" name="spec_idThree"
                        style="width: 150px" class="easyui-combobox"
                        data-options="
                                    required:true,
                                    url:getRootPath()+'/allSpec/getSpecName.shtml?spec_grade='+803,
                                    method:'get',
                                    valueField:'spec_id',
                                    textField:'spec_name',
                                    multiple:true,
                                    panelHeight:'150',
                                    editable:false">
                   
               </div> -->
               <div class="fitem" style="">
                   <label>四级规格</label>
                        <input id="spec_idFour" name="spec_idFour" data-options="
                                    required:true"
                        style="width: 150px" class="easyui-combobox">
                   
                   </div>
                 </div>
             </form>
       </div>
<div id="edit-winThree" class="easyui-dialog" title="Edit"
        data-options="closed:true,iconCls:'icon-save',modal:true"
        style="width: 400px; height: 410px;">
        <form id="editFormThree" class="ui-form" method="post">
        <input  type="hidden" id="classId" name="classify_id">
        <div class="ui-edit">
            <div class="fitem">
                <label>规格照片</label>
                <div id="guiGeDiv">
                    <img id="picture_url2" src="" width="200" height="200">
                </div>
                <input type="file" name="picture_url1" style=""
                    οnchange="previewImage(this,'picture_url2','guiGeDiv',200,200);fileChange(this);" />
                <input type="hidden" name="picture_url">

            </div>
            <div style="margin-top: 40px;">
                <a id="btnSaveThree" style="margin-left: 120px;"
                    class="easyui-linkbutton">确定</a> <a id="btnCancleThree"
                    style="margin-left: 30px;" class="easyui-linkbutton">取消</a>
            </div>
        </div>
        </form>
    </div>
    <div id="edit-winFive" class="easyui-dialog" title="Edit"
        data-options="closed:true,iconCls:'icon-save',modal:true"
        style="width: 400px; height: 410px;">
        <form id="editFormFive" class="ui-form" method="post">
        <input  type="hidden" id="classIdFive" name="classify_id">
        <div class="ui-edit">
            <div class="fitem" style="">
                   <label>商品规格参数</label>
                        <input id="paramete_name_id" name="paramete_name_id"
                        style="width:200px;height:50px" class="easyui-combobox"
                        data-options="
                           url: getRootPath()+'/allDictionary/getDictPub.do?code=1300',
                           valueField:'son_number',
                           textField:'son_name',
                           multiple:true,
                           multiline:true">
                   
               </div>
            <div style="margin-top: 40px;">
                <a id="btnSaveFive" style="margin-left: 120px;"
                    class="easyui-linkbutton">确定</a> <a id="btnCancleFive"
                    style="margin-left: 30px;" class="easyui-linkbutton">取消</a>
            </div>
        </div>
        </form>
    </div>
    <div id="djfl1" class="easyui-menu" style="width: 120px;">
    <input type="hidden" id="treeParentId">
        <div οnclick="append(2)">增加二级分类</div>    
        <div οnclick="update()">修改分类</div>
        <div οnclick="remove()">删除分类</div>
    </div>
    <div id="djfl3" class="easyui-menu" style="width: 120px;">
        <div οnclick="append(3)">增加三级分类</div>
        <div οnclick="addParam()">增加商品规格参数</div>
        <div οnclick="update()">修改分类</div>
        <div οnclick="remove()">删除分类</div>
    </div>
    <div id="djfl4" class="easyui-menu" style="width: 120px;">
        <!-- <div οnclick="showTree()">关联规格</div> -->
        <div οnclick="append(4)">增加四级分类</div>
        <div οnclick="update()">修改分类</div>
        <div οnclick="remove()">删除分类</div>
    </div>
    <div id="djfl5" class="easyui-menu" style="width: 120px;">
        <div οnclick="update()">修改分类</div>
        <div οnclick="remove()">删除分类</div>
    </div>
    
    <div id="excel-win"  class="easyui-dialog" title="Basic window" data-options="closed:true,iconCls:'icon-save',modal:true" style="width:350px;height:400px;">
              <form id="excelForm"  method="post" enctype="multipart/form-data">  
               选择文件：　<input id="uploadExcel" name="uploadExcel"  type="file" style="width:200px" data-options="prompt:'请选择文件...'">  
                   　　<a href="#" class="easyui-linkbutton" style="width:122px" id="import-btn" οnclick="excelDR()"> 导入</a> 　　     　　　　　      
            </form>
    </div>
    <!--900 700  -->
    <div id="excel-winOne"  class="easyui-dialog" title="Basic window" data-options="closed:true,iconCls:'icon-save',modal:true" style="width:350px;height:150px;">
          <!-- <div class="ui-search-panel" style="width:900px;height:60px;"> -->
            <form id="exportForm" >
                <label class="ui-label" style="margin-left: 15px">分类名称:</label>
                <select id="classify_id" name="classify_id" class="easyui-combobox"  style="width: 100px;"
                    data-options="
                           url: getRootPath()+'/ctObserver/getClassifyName.do?classify_grade=1',
                           valueField: 'classify_id',
                           textField: 'classify_name',
                           panelHeight:'auto',
                           panelWidth: 142,
                           width:142,
                           editable:false,
                           onChange: function(newVal, oldVal){
                           
                          }
                "></select>
                <!-- <label class="ui-label">等级:</label>
                <select id="classify_grade" class="easyui-combobox" name="classify_grade" style="width: 100px;"></select> -->
                <!-- <button type="submit" id="export" class="easyui-linkbutton" iconCls="icon-search">导出</button> -->
                <a href="#" id="export" class="easyui-linkbutton"  style="width:122px;margin-left: 20px">导出</a>
            </form>
        <!-- </div> 
             <div style="width:900px;height:590px;">
                <table id="list" ></table>
            </div> -->
  </div>
    <script type="text/javascript" src="<%=basePath%>/view/ant/sys/page-ctObserver.js"></script>
</body>
</html>

allSpec.jsp文件内容：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
   <%@include file="/view/resource.jsp" %>
  </head>
  <body class="easyui-layout">
      <!-- Search panel start -->
      <div class="ui-search-panel" region="north" style="height: 80px;" title="过滤条件" data-options="striped: true,collapsible:false,iconCls:'icon-search',border:false" >  
      <form id="searchForm">
        <p class="ui-fields">
            <label class="ui-label">规格名称:</label><input name="spec_name" class="easyui-textbox ui-text" style="width:100px;">
            <label class="ui-label">规格等级:</label><input
                        id="spec_grade" name="spec_grade" type="text" maxlength="50" class="easyui-combobox">
        </p>
        <a href="#" id="btn-search" class="easyui-linkbutton" iconCls="icon-search">查询</a>
        <a href="#" id="clear-button" class="easyui-linkbutton" iconCls="icon-search" οnclick="seachClear();">重置</a>
      </form>  
     </div> 
     <!--  Search panel end -->

     <!-- Data List -->
     <div region="center" border="false" >
     <table id="data-list"></table>
     </div>
     
     <!-- Edit Win&Form -->
     <div id="edit-win" class="easyui-dialog" title="Basic window" data-options="closed:true,iconCls:'icon-save',modal:true" style="width:400px;height:280px;">  
         <form id="editForm" class="ui-form" method="post">  
              <input class="hidden" name="spec_id">
              <div class="ui-edit">
                    <div class="fitem">
                        <label>规格等级</label>
                        <input id="spec_grade" name="spec_grade" type="text" maxlength="50" class="easyui-combobox" style="width: 130px;"
                        data-options="
                                required:true,
                                url: getRootPath()+'/allDictionary/getDictPub.do?code=800',
                                method:'get',
                                valueField:'son_number',
                                textField:'son_name',
                                multiple:false,
                                panelHeight:'200',
                                editable:false,
                                onChange: function(newVal, oldVal){
                                    if(newVal == '805'){
                                        document.getElementById('affiliated').style.display='';
                                    }else{
                                        document.getElementById('affiliated').style.display='none';
                                    }
                                }
                        ">                        
                    </div>
                    <div class="fitem">
                        <label>规格名称</label>
                        <input name="spec_name" type="text" maxlength="100" data-options="required:true" class="easyui-textbox" style="width: 130px;" missingMessage="请填写规格名称">
                    </div>
                    <div class="fitem" id="affiliated" style="display: none">
                        <div class="fitem">
                            <label>附属规格名称</label>
                            <input id="affiliated_spec"  name="affiliated_spec" type="text" maxlength="100" class="easyui-combobox" style="width: 130px;" data-options="" >
                        </div>
                        <div class="fitem">
                            <label>附属规格数量</label>
                            <input id='affiliated_number' name="affiliated_number" disabled="disabled" type="text" maxlength="100" class="easyui-textbox" style="width: 130px;" data-options="" missingMessage="请填写规格数量">
                        </div>
                        
                    </div>
              </div>
         </form>
       </div>
       <script type="text/javascript" src="<%=basePath%>/view/ant/sys/page-allSpec.js"></script>
  </body>
</html>

源码下载