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=''
onclick='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"));