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"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapse'+ parentParamId +'">'+ parentParamName +'</a></h4></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 style="display:inline-block"><input type="checkbox" style="vertical-align:middle; margin-top:0;" value="'+ options[j] + j +'" name="youname" id="myid'+ j +'"/><label for="myid'+ j +'">'+ options[j] + i + '  ' +'</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请求失败！'
});
}
});
}