query，bootstrap在开发中使用的总结

当ajax请求返回的数据date如上面所显示，要达到下图所示的效果：

实体：

修改页面：


JS:

1、Jquery中判断一个集合或数组是否为空：
var rightList = {};// 右边列表
if($.isEmptyObject(rightList)){
alert("请至少选择ploicy列表中的一项");
return false;
}

2、初始化表单：禁用表单默认提交，指定回车触发按钮
inputSecltor是input的ID，
btnSecltor是按钮的ID，
formSelec是form表单的ID
enterClick:function(inputSecltor,btnSecltor,formSelector){
$("#"+formSelector).submit(function(e){
e.preventDefault();
});
$("#"+inputSecltor).keydown(function(e){
var currKey=0,e=e||event;
currKey=e.keyCode||e.which||e.charCode;
if(currKey==13){
$("#"+btnSecltor).trigger('click');
}
});
}

3、 //更改modal框的宽度为自适应 modal_size:function(secltor){
//选择器下的div下的class=modal-dialog的样式设计
$("#"+secltor+">div.modal-dialog").css({
width:'auto',
'margin-left':function(){
return -($(this).width())/2;
}
});
}


4、//设置选择的元素的input是值是“”，select中的value
function initValidForm(selector){
$(selector+" input").val("");
$(selector+
" select option:first-child").attr("selected", true).siblings().removeAttr("selected"); $(selector+" .has-error").removeClass("has-error").children("label.error").hide();
}
5、在form表单中不同实体数据属性的提交

JS：
$("button#save_edit").bind("click", function() {
var templateId=$("#templateName_edit").prop("name");
// 获取表格的模板名称
var policyTemplateName =$("#templateName_edit").val();
var test = [];
$.each(rightList, function(k, obj) {
//将右边列表中的数据放入到test数组中
test.push(obj);
})
// 获取左边字典的列表[]，将模板的ID，模板名称，右边的列表的数组封装成一个对象， 传入到后台
var j = {
"templateId": templateId,
"policyTemplateName" : policyTemplateName,
"leftChangeList" : test
};

// ajax修改数据库数据。成功时执行以下数据。
$.ajax({
'url' : $.baseUrl +"/policyTemplateInfoManager/updatePolicyTemplateInfo",
'type' : "post",
'contentType' : 'application/json',
'data' : JSON.stringify(j),
'success' : function(data) {
if (data != null) {
alert("保存成功！");
$("#editDiv").modal('hide');
table.draw();
} else {
alert("保存出错！");
}
},
});
});
JSON.stringify(j)：
在实体中leftChangeList是list集合，集合中存放的是字典对象，所以在前台需要声明一个存放对象的数组test[]

{"policyTemplateName":"ax","leftChangeList":[{"policyId":14,"policyName":"PollDelay1","policyType":"0","defaultValue":"60","remark":null,"createTime":"2016-08-01 19:34:00"},{"policyId":11,"policyName":"PrimaryIpAddr1","policyType":"1","defaultValue":"192.168.118.202","remark":"","createTime":"2016-08-01 19:34:00"}]}

后台接收ajax请求传值的JSON.stringify(j)

@RequestMapping(value = "/updatePolicyTemplateInfo", method = RequestMethod.POST)
@ResponseBody
public String updatePolicyTemplateInfo(@RequestBody PolicyTemplateRelationModel params, HttpServletRequest request)
PolicyTemplateRelationModel是封装的前台传过来的test{}
PolicyTemplateRelationModel实体：

JSON.stringify(leftChangeList)：将左边列表发生的改变的转换成json字符串
例如 ：
console.log(leftChangeList);
输出的结果：[object Object]
console.log(JSON.stringify(leftChangeList));
输出的结果：
PollDelay1：是左侧列表字典的名称，对应一个字典对象
{"PollDelay1":{"policyId":14,"policyName":"PollDelay1","policyType":"0","defaultValue":"60","remark":null,"createTime":"2016-08-01 19:34:00"}}

6、SpringMVC传递参数
handler method 参数绑定常用的注解,我们根据他们处理的Request的不同内容部分分为四类：（主要讲解常用类型）
A、处理requet uri 部分（这里指uri template中variable，不含queryString部分）的注解：   @PathVariable;
B、处理request header部分的注解：   @RequestHeader, @CookieValue;
C、处理request body部分的注解：@RequestParam,  @RequestBody;
D、处理attribute类型是注解： @SessionAttributes, @ModelAttribute;

（1）、 @PathVariable 
当使用@RequestMapping URI template 样式映射时， 即 someUrl/{paramId}, 这时的paramId可通过 @Pathvariable注解绑定它传过来的值到方法的参数上。
例如：
Html:
<button data-code=''type='button' class='btn-sm' id='delTemplate"+row.templateId+"'data-localize=''
οnclick='delTemplate("+row.templateId+");'>删除</button>


JS：
$.ajax({
'url': $.baseUrl+"/policyTemplateManager/deletePolicyTemplate/"+id,
'type': "post",
'contentType' : 'application/json'
});

Controller:
@RequestMapping(value = "/deletePolicyTemplate/{id}", method = RequestMethod.POST)
@ResponseBody
public boolean deletePolicyTemplate(@PathVariable Integer id ){}
(2)、 @RequestHeader、@CookieValue
@RequestHeader 注解，可以把Request请求header部分的值绑定到方法的参数上。
一个Request 的header部分：
1.Host                    localhost:8080  
2.Accept                  text/html,application/xhtml+xml,application/xml;q=0.9  
3.Accept-Language         fr,en-gb;q=0.7,en;q=0.3  
4.Accept-Encoding         gzip,deflate  
5.Accept-Charset          ISO-8859-1,utf-8;q=0.7,*;q=0.7  
6.Keep-Alive              300 

Controller:

1.@RequestMapping("/displayHeaderInfo.do")  
2.public void displayHeaderInfo(@RequestHeader("Accept-Encoding") String encoding, @RequestHeader("Keep-Alive") long keepAlive)  {  
3.}  
@CookieValue 可以把Request header中关于cookie的值绑定到方法的参数上。
例如有如下Cookie值：
1.JSESSIONID=415A4AC178C59DACE0B2C9CA727CDD84  
参数绑定的代码：
1.@RequestMapping("/displayHeaderInfo.do")  
2.public void displayHeaderInfo(@CookieValue("JSESSIONID") String cookie)  { 
3.}  

(3)、@RequestParam, @RequestBody
@RequestParam 
A） 常用来处理简单类型的绑定，通过Request.getParameter() 获取的String可直接转换为简单类型的情况（ String--> 简单类型的转换操作由ConversionService配置的转换器来完成）；因为使用request.getParameter()方式获取参数，所以可以处理get 方式中queryString的值，也可以处理post方式中 body data的值；
B）用来处理Content-Type: 为 application/x-www-form-urlencoded编码的内容，提交方式GET、POST；
C) 该注解有两个属性： value、required； value用来指定要传入值的id名称，required用来指示参数是否必须绑定；
例如ajax处理get 方式的请求：
$.ajax({
'url' : $.baseUrl+"/policyDictionaryManager/listPolicyDictionary?templateId="+templateId,
'type' : 'get',
'contentType' : "application/json",
'
});

Controller:
@RequestMapping(value = "/listPolicyDictionary",
method = { RequestMethod.POST, RequestMethod.GET }
)
@ResponseBody
public Map<String, QipPolicyDictionaryTable> getPolicyDictionaryList(@RequestParam("templateId") Integer templateId)}

例如：ajax处理post方式的请求：

$.ajax({
'url': $.baseUrl+"/policyDictionaryManager/detailPolicyDicti onary",

'type': "post",

'data': {"policyId": policyId}
});

Controller:
@RequestMapping(value = "/detailPolicyDictionary", method = RequestMethod.POST)
@ResponseBody
public QipPolicyDictionaryTable deltailPolicyDictionary(@RequestParam("policyId") Integer policyId) throws JsonProcessingException {}

@RequestBody
该注解常用来处理Content-Type: 不是application/x-www-form-urlencoded编码的内容，例如application/json, application/xml等；
它是通过使用HandlerAdapter 配置的HttpMessageConverters来解析post data body，然后绑定到相应的bean上的。
因为配置有FormHttpMessageConverter，所以也可以用来处理 application/x-www-form-urlencoded的内容，处理完的结果放在一个MultiValueMap<String, String>里，这种情况在某些特殊需求下使用，详情查看FormHttpMessageConverter api;

例如：
var addForm = Util.getObject("form#addForm");
$.ajax({
'url': $.baseUrl+"/policyDictionaryManager/savePolicyDictionary",
'type': "post",
'contentType' : 'application/json',
'data': JSON.stringify(addForm)
});
Controller:
@RequestMapping(value = "/savePolicyDictionary", method = RequestMethod.POST)
@ResponseBody
public String saveOptionDictionary(@RequestBody @Valid QipPolicyDictionaryTable policyDictionary){}

7、清空页面中的数据
(1)、清空table中的内容：table的id=listDictinaryDetail,清空操作： $("#listDictinaryDetail").empty();
(2)清空table去首行的tr外的所有内容，table的id=totalMsgReport,清空操作：$("#totalMsgReport tr:not(:first)").html("");
8、select 初始化值，option 的value是id,内容是name
//添加,初始化阈值字典的下拉列表中的值
function initThresholdDictionaryName(){
$.ajax({
'url': $.baseUrl+"/thresholdLevelManager/allThresholdItem",
'type' : 'post',
'contentType' : "application/json",
'success': function(data){
var selector = "#selectDictinaryID,#selectDictinaryID1";
$(selector).empty().append(
"<option value=''>--请选择阈值项名称--</option>");
for (var i in data) {

$(selector).append(
"<option value=\""+data[i]['itemID']+"\">"+data[i]['itemName']+"</option>");
}
},
});
}

调用： initThresholdDictionaryName();
其中data在控制台显示的是一个list，即是一个存放对象的数组，相当于是一个二维数组，后台数据返回的list<Object>集合在前端输出样式：
[
{
"serviceId":1,"serviceName":"VOIP","serviceSimple":"VOIP",
"summary":"VOIP","createTime":"2016-08-15 18:13:28"
},封装的是一个对象所有的字段
{
"serviceId":2,"serviceName":"IPTV","serviceSimple":"IPTV",
"summary":"", "createTime":"2016-08-01 11:24:23"
},封装的是一个对象所有的字段
]
在对data进行遍历：
i 是每一对象，data 是二维数组
for(var i in data){
data[i]['itemID']：获取的是每一个对象中字段是itemID的值
data[i]['itemName']：获取的是每一对象中字段是itemName 的值。
}
在引号中追加标签时应注意的点：
（1）、正常的<option value="">内容</option>
（2）、遇到双引号需要进行\进行转换
<option value=\"\">
Value中是变量时需要使用"+变量+"

即： <option value=\""+data[i]+"\">
变量中有常量时需要将双引号变成单引号
即： <option value=\""+data[i]['itemID']+"\">

（3）、option的内容是变量时，需要"+内容变量+" 即：<optionvalue=\""+data[i]['itemID']+"\">"+data[i]['itemName']+"</option>

9、Select 另外一种初始方式：
//初始化添加下拉列表中的业务名称
function initServiceName(selector){
$.ajax({
'url':$.baseUrl+"/service/allServices",
'contentType':"application/json",
'type':"post",
'success': function(data){
$(selector).empty().append("<option value=\"\">"+"选择业务名称"+"</option>");
for (var i in data) { $(selector).append("<option value=\""+data[i]['serviceId']+"\">"+data[i]['serviceName']+"</option>");
}
$("#searchServiceSelect").val(t);
},
});
}


调用： initServiceName("#searchServiceSelect");
10、数据修改获取选择对象的值并进行input的赋值
例如：1,对每个input逐个赋值
var beforeEditData = null;
$('#example tbody').on( 'click', 'button#editbtn', function () {
//获取要修改的行对象
var row = table.row( $(this).parents('tr') );
var data = row.data();
beforeEditData = data;
$("#selectDictinaryID1").val(data["thresholdItem"]["itemID"]);
$("#editor-thresholdValue").val(data["thresholdValue"]);
$("#selectAlarmLevelID1").val(data["alarmLevel"]["id"]);
$("#selectAlarmLevelID2").get(0).selectedIndex=0;
$("#editThreshold").modal("show");
});
注意点：
如果获取选中修改行的对象Department数据{}，里面存放的可能是下面的样式：
后台返回前台的只是包含普通字段的对象
(1),{"name"："市场部","type"："销售"}
获取里面的市场部和销售可以：roe.data()['name']
roe.data()['tyep']
后台返回前台的不仅包含普通字段的，还有list对象
(2),{"name"："市场部","type"："销售",
"person":[{"pname":"张三","age":20},{" pname":"李四","age":20}]
}


例如：1,通过循环对每个input赋值
var beforeEditData = null;
$('#example tbody').on( 'click', 'button#editbtn', function () {
var row = table.row( $(this).parents('tr') );
var data = row.data();
beforeEditData = data;
data['rowId'] = row.index();
var fields = $("#editBrasConf form").serializeArray();
jQuery.each( fields, function(i, field){
$("#editBrasConf [name='"+field.name+"']").val(data[field.name]);
});
$("#editBrasConf").modal("show");
});
注意点：
（1）serializeArray() 方法通过序列化表单值来创建对象数组（名称和值）。
即：[
{name: 'firstname', value: 'Hello'},
{name: 'lastname', value: 'World'},
{name: 'alias'}, // 值为空
]
您可以选择一个或多个表单元素（比如 input 及/或 textarea），或者 form 元素本身。
serializeArray() 方法序列化表单元素，返回 JSON 数据结构数据。
此方法返回的是 JSON 对象而非 JSON 字符串。
返回的 JSON 对象是由一个对象数组组成的，其中每个对象包含一个或两个名值对
—— name 参数和 value 参数（如果 value 不为空的话）。

（2） form 中是普通的对象的字段
var fields = $("#editBrasConf form").serializeArray();
输出：
Console.log(fields );
结果：
fields---->[object Object],[object Object],
[object Object],[object Object]
console.log("field.name--->"+field.name);
结果：
field.name--->srinterfaceip
field.name--->serviceName
field.name--->srloopbackip
field.name--->srname
field.name--->sralias

输出：console.log("data[field.name]---->"+data[field.name]);
结果：
data[field.name]---->192.168.10.1
data[field.name]---->VOIP
data[field.name]---->192.168.10.1
data[field.name]---->192.168.10.1
data[field.name]---->192.168.10.1
(3)遍历匹配form中和name相同属性，并对value赋值
jQuery.each( fields, function(i, field){
$("#editBrasConf [name='"+field.name+"']").val(data[field.name]);
});

11、查看一个对象的个别字段，即查看详情信息
//查看阈值级别详情
function deltailThresholdLevel(){
$('#example tbody').on( 'click',"button#searchThrsholdDetail", function(){
var data = table.row( $(this).parents('tr') ).data();
var id = data['id'];
$.ajax({
'url': $.baseUrl+"/thresholdLevelManager/detailThresholdLevel",
'type': "post",
'data': {"id": id},
'success': function(d){
var list=["itemName","thresholdValue","leveName","description"];
if(d!=null){
//清空表中的内容
$("#listThresholdLevelDetail").empty();
//遍历对列赋值
$.each(list,function(k,v){
if(v=="itemName"){
var tr=$("<tr><td>阈值项名称</td><td>"+d[v]+"</td></tr>");
}
if(v=="thresholdValue"){
var tr=$("<tr><td>告警阀值</td><td>"+d[v]+"</td></tr>");
}
if(v=="leveName"){
var tr=$("<tr><td>告警级别</td><td>"+d[v]+"</td></tr>");
}
if(v=="description"){
var tr=$("<tr><td>阈值级别描述</td><td>"+d[v]+"</td></tr>");
}
//将行添加到table中
tr.appendTo($("#listThresholdLevelDetail"));
//显示详情信息
$("#showThresholdLevelDetail").modal('show');
});
}
else{alert("该模板暂无详情信息");}
},
});
});
}
注意点：
(1).获取一个对象的详情信息，需要通过ID先查找到该对象，
即：要首先获取对象的ID，后台通过ID查找到对象，前台对部分数据进行显示。
var data = table.row( $(this).parents('tr') ).data();
var id = data['id'];
（2）.如何只显示后台返回对象的个别字段？
解决办法：
可以在返回整个对象成功情况下，在js中定义一个存放个别字段的数组，
然后遍历自定义的数组进行匹配，对td赋值。
即
后台通过ID返回的对象：
{
"leveName":"严重","thresholdValue":"50",
"itemName":"磁盘利用率","description":"cpu利用率2级告警阈值"
}
自定义的数组

var list=["itemName","thresholdValue","leveName","description"];
遍历 list
K是list数组的下标，v是value值
d[v]是得到的是对象中对应字段的value值
$.each(list,function(k,v){
if(v=="itemName"){
var tr=$("<tr><td>阈值项名称</td><td>"+d[v]+"</td></tr>");
}
}
（3）、动态将tr追加到table表中
tr.appendTo($("#listThresholdLevelDetail"));