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請求失敗！'
            });
        }
    });
}