jquery和bootstrap的示例

// A、展示产品参数值：（1）请求数据

// A、展示产品参数值：（1）请求数据
function displayProdcutParameterValue(productData){
    $.ajax({
        type:"POST",
        url:"medProductParameterValueAction!list",
        data:productData,
        dataType:"json",
        success:displayMyProdcutParameterValue,
        error:function(){
            admin.tipsPanel({
                titleText: '提示',
                contentText: 'AJAX通信失败！'
            });
        }
    });
}

// A、展示产品参数值：（2）对请求返回的参数进行处理

// A、展示产品参数值：（2）对请求返回的参数进行处理
function displayMyProdcutParameterValue(result){
    var boxBodyObject = $('#tab_medProductParameterValue .box-body');
    boxBodyObject.empty();
    var tableObject = $('<table class="table table-bordered"></table>');
    boxBodyObject.append(tableObject);

    if(result != null && result.total != null && result.total > 0){
        var rows = result.rows;
        var parentId = -1;
        var isCategory = false;
        for(var i=0;i<rows.length;i++){
            var currentParam = rows[i];
            var parentParamId = currentParam.parentParameterId;
            var parentParamName = currentParam.parentParameterName;
            var paramName = currentParam.parameterName;
            var paramValue = currentParam.parameterValue;

            if(parentId != parentParamId){
                isCategory = true;
                parentId = parentParamId;
            }
            else{
                isCategory = false;
            }

            if(isCategory == true){
                addTrIntoTable(tableObject,parentParamName,paramName,paramValue,isCategory);
            }
            addTrIntoTable(tableObject,parentParamName,paramName,paramValue,false);
        }
    }
    //else{
    //    admin.tipsPanel({
    //        titleText: '提示',
    //        contentText: '当前产品似乎未添加任何参数！'
    //    });
    //}
}

// A、展示产品参数值：（3）处理DOM操作，即动态添加<tr>到<table>当中

function addTrIntoTable(tableObject,parentParamName,paramName,paramValue,isCategory){
    var trObject = $('<tr'+ (isCategory?' class="active"':'')+'></tr>');
    tableObject.append(trObject);

    if(isCategory == true){
        var thObject = $('<th colspan="2">'+ parentParamName +'</th>');
        trObject.append(thObject);
    }else{
        var tdObjects = $('<td>'+paramName+'</td><td>'+paramValue+'</td>');
        trObject.append(tdObjects);
    }
}

// B、编辑产品参数值：（1）请求“参数项”数据

// B、编辑产品参数值：（1）请求“参数项”数据
function requestAndDisplayProdcutParameter(productData){
    $.ajax({
        type:"POST",
        url:"medProductParameterAction!list",
        data:productData,
        dataType:"json",
        success:displayMyProdcutParameter,
        error:function(){
            admin.tipsPanel({
                titleText: '提示',
                contentText: 'AJAX通信失败！'
            });
        }
    });

}

// B、编辑产品参数值：（2）处理“参数项”返回数据 和 （3）请求“参数值”数据

// B、编辑产品参数值：（2）处理“参数项”返回数据 和 （3）请求“参数值”数据
function displayMyProdcutParameter(result){
    debugger;
    var boxBodyObject = $('#medProductParameterForm .box-body');
    var accordionObject = $('<div class="panel-group" id="accordion"></div>');
    boxBodyObject.append(accordionObject);

    if(result != null && result.total != null && result.total > 0){
        var rows = result.rows;
        for(var i=0;i<rows.length;i++){
            var parentParam = rows[i];
            var parentParamId = parentParam.parameterId;
            var parentParamName = parentParam.parameterName;
            var parentParamSortId = parentParam.sortId;
            var childParams = parentParam.parameters;

            var isFirst = (i == 0)?true:false;
            addPanelIntoAccordion(accordionObject,parentParamId,parentParamName,parentParamSortId,childParams,isFirst);
        }

        var productData = {};
        productData.queryJson = JSON.stringify({
            "productId": selectMedProductId,
            "sortType":"1",
            "isValid":"1"
        });
        productData.page = 1;
        productData.rows = 999;

        $.ajax({
            type:"POST",
            url:"medProductParameterValueAction!list",
            data:productData,
            dataType:"json",
            success:echoMyProdcutParameterValue,
            error:function(){
                admin.tipsPanel({
                    titleText: '提示',
                    contentText: 'AJAX通信失败！'
                });
            }
        });

        $("#medProductParameterModel").modal();
    }
    else{
        admin.tipsPanel({
            titleText: '提示',
            contentText: '当前产品似乎未选择产品大类！'
        });
    }
}

// B、编辑产品参数值：（2-1）处理“参数项”DOM操作

// B、编辑产品参数值：（2-1）处理“参数项”DOM操作
function addPanelIntoAccordion(accordionObject,parentParamId,parentParamName,parentParamSortId,childParams,isFirst){
    //
    var panelObject = $('<div class="panel panel-default" myid="'+parentParamId+'" myname="'+parentParamName+'" mysort="'+parentParamSortId+'"></div>');
    var panelHeadingObject = $('<div class="panel-heading"><h5 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapse'+ parentParamId +'">'+ parentParamName +'</a></h5></div>');
    var panelCollapseObject = $('<div id="collapse'+ parentParamId +'" class="panel-collapse collapse'+ (isFirst?' in':'') +'"></div>');
    var panelBodyObject = $('<div class="panel-body"></div>');

    accordionObject.append(panelObject);
    panelObject.append(panelHeadingObject);
    panelObject.append(panelCollapseObject);
    panelCollapseObject.append(panelBodyObject);

    addParamIntoPanelBody(panelBodyObject,childParams);
}

// B、编辑产品参数值：（2-2）处理“参数项”DOM操作细节【完结】

function addParamIntoPanelBody(panelBodyObject,childParams){
    if(childParams == undefined || childParams == null || childParams.length < 1) return;

    for(var i=0;i<childParams.length;i++){
        var currentParam = childParams[i];
        var childParamId = currentParam.parameterId;
        var childParamName = currentParam.parameterName;
        var childParamIsSelectable = currentParam.isSelectable;
        var childParamSortId = currentParam.sortId;
        var childParamValue = currentParam.parameterValue;
        var options = {};
        if(childParamIsSelectable != 0){
            options = childParamValue.split('|');
        }

        var formGroupObject = $('<div class="form-group" id="formGroup_'+ childParamId +'" myid="'+childParamId+'" myname="'+ childParamName+'" isselectable="'+childParamIsSelectable+'" mysort="'+ childParamSortId +'"></div>');
        var lableObject = $('<label class="col-sm-2 control-label">'+ childParamName +'</label>');

        panelBodyObject.append(formGroupObject);
        formGroupObject.append(lableObject);

        if(childParamIsSelectable == 0){
            var contentObject = $('<div class="col-sm-10"><input type="text" class="form-control" name="productName" id="xxxxxx001" /></div>');
            formGroupObject.append(contentObject);
        }
        else{
            var checkBoxDivObject = $('<div class="col-sm-10"></div>');
            var checkBoxObject;

            for(var j=0;j<options.length;j++){
                //checkBoxObject = $('<span ><input type="checkbox"  value="'+ options[j] + j +'" name="youname" id="myid'+ j +'"/><label for="myid'+ j +'">'+ options[j] + i + '&nbsp;&nbsp;' +'</label></span>');
                checkBoxObject = $('<label class="checkbox-inline"><input type="checkbox" id="inlineCheckbox1" value="'+ options[j] +'"> ' + options[j] + '</label>');
                checkBoxDivObject.append(checkBoxObject);
            }

            formGroupObject.append(checkBoxDivObject);
        }

    }
}

// B、编辑产品参数值：（3-1）处理“参数值”返回数据【完结】

// B、编辑产品参数值：（3-1）处理“参数值”返回数据【完结】
function echoMyProdcutParameterValue(result){
    if(result != null && result.total != null && result.total > 0){
        var rows = result.rows;
        for(var i=0;i<rows.length;i++){
            var currentParam = rows[i];
            var paramId = currentParam.parameterId;
            var paramValue = currentParam.parameterValue;

            //FIXME   继续处理数据回显
            debugger;
            var currentGroup = $('#formGroup_' + paramId);
            //判断：如果没有找到相应的formGroup，则continue。
            if(currentGroup == undefined || currentGroup == null || currentGroup.size()<1) {
                continue;
            }

            var isSelectable = currentGroup.attr('isselectable');
            if(isSelectable == 0){
                //文本框
                $('.col-sm-10 :text:first',currentGroup).val(paramValue);
            }
            else if(isSelectable == 1){
                //复选框
                //var cks = $('.col-sm-10 :checkbox',currentGroup);
                //var checkboxArray = [];
                //cks.each(function (k,v) {
                //    checkboxArray[checkboxArray.length] = $(v);
                //});
                //
                //var options = {};
                //options = paramValue.split('|');
                //if(options.length > 0 && checkboxArray.length > 0){
                //    for(var i=0;i<checkboxArray.length;i++){
                //        var checkBoxObject = checkboxArray[i];
                //        var checkValue = checkBoxObject.val();
                //        for(var j=0;j<options.length;j++){
                //         var optionValue = options[j]
                //            if(checkValue == optionValue){
                //                checkBoxObject.prop("checked",true);
                //                break;
                //            }
                //        }
                //    }
                //
                //}

                var options = {};
                options = paramValue.split('|');
                if(options.length > 0){
                    for(var j=0;j<options.length;j++){
                        var optionValue = options[j]
                        var checkboxObject = $('.col-sm-10 :checkbox[value='+optionValue+']',currentGroup);
                        if(checkboxObject == undefined || checkboxObject == null || checkboxObject.size()<1){
                            continue;
                        }
                        checkboxObject.prop("checked",true);
                    }
                }


            }
            else{
                continue;
            }
        }
    }
}

// C、保存产品参数值：

// C、保存产品参数值：
function saveProductParameterValue(){
    var dataInit = {};
    var contentJson = "";

    //1、通过Id为accordion的div找到其内部的所有Panel
    debugger;
    var panelObjects = $('#accordion .panel-default');
    var panelArray = [];
    panelObjects.each(function(k,v){
        panelArray[panelArray.length] = $(v);
    });

    //2、通过遍历所有Panel获取用户的输入参数，保存于contentJson内
    for(var panelIndex=0;panelIndex<panelArray.length;panelIndex++){
        var currentPanel = panelArray[panelIndex];
        var parentParamId = currentPanel.attr('myid');
        var parentParamName = currentPanel.attr('myname');
        var parentParamSort = currentPanel.attr('mysort');
        console.log(parentParamId + "==" + parentParamName + "==" + parentParamSort);

        var groupObjects = $('.form-group',currentPanel);
        var groupArray = [];
        groupObjects.each(function(k,v){
            groupArray[groupArray.length] = $(v);
        });

        for(var groupIndex=0;groupIndex<groupArray.length;groupIndex++){
            var currentGroup = groupArray[groupIndex];
            var childParamId = currentGroup.attr('myid');
            var childParamName = currentGroup.attr('myname');
            var childParamSort = currentGroup.attr('mysort');
            var isSelectable = currentGroup.attr('isselectable');

            var childParamValue = "";
            if(isSelectable == 0){
                //文本框
                var textObject = $('.col-sm-10 :text:first',currentGroup);
                childParamValue = textObject.val();
            }
            else if(isSelectable == 1){
                //复选框
                var cks = $('.col-sm-10 :checkbox:checked',currentGroup);
                var arr = [];
                cks.each(function (k,v) {
                    arr[arr.length] = $(v).val();//记录选中的value值
                });
                if(arr.length > 0){
                    for(var i=0;i<arr.length-1;i++){
                       childParamValue += arr[i] + "|";
                    }
                    childParamValue += arr[arr.length-1];
                }
            }
            else{
                continue;//出现这种情况，那就continue吧（略过）
            }

            if(childParamValue != undefined && childParamValue != null && childParamValue != ""){
                console.log("==" + childParamId + "==" + childParamName + "==" + childParamSort + "==" + isSelectable + "==" + childParamValue);

                var paramValueJson = JSON.stringify({
                    "productId": selectMedProductId,
                    "parameterId": childParamId,
                    "parameterName": childParamName,
                    "parameterValue": childParamValue,
                    "sortId": childParamSort,
                    "parentParameterId": parentParamId,
                    "parentParameterName": parentParamName,
                    "parentSortId": parentParamSort
                });

                contentJson += paramValueJson + "#@#";
            }
        }

    }

    //3、将contentJson进一步封闭到dataInit内
    dataInit.queryJson = JSON.stringify({
        "productId":selectMedProductId,
        "contentJson": contentJson
    });

    //4、向服务器发送请求，保存数据
    $.ajax({
        type:"POST",
        url:"medProductParameterValueAction!save",
        data:dataInit,
        cache : false,
        success : function(data){
            if (data == 'success') {
                admin.tipsPanel({
                  titleText: '提示',
                  contentText: '操作成功！'
                });
            }else{
                admin.tipsPanel({
                   titleText: '提示',
                   contentText: '操作失败！'
                });
            }

            $('#medProductParameterForm')[0].reset();
            $("#medProductParameterModel").modal("hide");
        },
        error : function(){
            admin.tipsPanel({
               titleText: '提示',
               contentText: 'AJAX请求失败！'
            });
        }
    });
}