Win8 Metro風格的Web案頭HteOS

標籤：java   javascript   jquery   jsp   json   

Checkbox類：

1.實現checkbox的全選功能

<script type="text/javascript">//全選checkbox：1、當全選checkbox勾選，子checkbox(name為'ids'的checkbox)自動全部勾選//2、當全選checkbox取消勾選，子checkbox自動全部取消勾選function  checkAll(){      if($("#checkall")[0].checked){      $("input[type='checkbox'][name='ids']").attr("checked","checked");      }else{      $("input[type='checkbox'][name='ids']").attr("checked",null);      }}//子checkbox：1、當所有子checkbox全部勾選時，全選checkbox自動勾選//2、當有一個子checkbox沒有勾選時，全選checkbox自動改為未勾選function changeCheckCount(){       var count=0;   $("input[type='checkbox'][name='ids']").each(function(index,data){            if(this.checked){            count++;              }   });       if(count== $("input[type='checkbox'][name='ids']").length){       $("#checkall").attr("checked","checked");       }else{       $("#checkall").attr("checked",null);       }}</script>

<td><!-- 全選checkbox --><s:checkbox name="checkall" id="checkall" value="" cssClass="checkbox" onclick="checkAll()"/></td><td><!-- 子checkbox -->   <s:checkbox name="ids"  fieldValue="" cssClass="checkbox" onclick="changeCheckCount()"/>   <s:checkbox name="ids"  fieldValue="" cssClass="checkbox" onclick="changeCheckCount()"/>   <s:checkbox name="ids"  fieldValue="" cssClass="checkbox" onclick="changeCheckCount()"/>   <s:checkbox name="ids"  fieldValue="" cssClass="checkbox" onclick="changeCheckCount()"/></td>

2.擷取checkbox被選中的個數，並將checkbox的值組織成字串

<script type="text/javascript">//1、擷取checkbox選中的個數：count//2、將選中的checkbox的值(此例子為id)組織成"id,id,id,..."類型的字串,方便action擷取：idsfunction checkbox(){    var count=0;    var ids="";    $("input[type='checkbox'][name='ids']").each(function(index,data){       if(this.checked){          count++;          if(count==1){              ids=$(this).val();          }else{              ids=ids+","+$(this).val();          }       }   });}</script> 

<td>   <s:checkbox name="ids"  fieldValue="" cssClass="checkbox"  />   <s:checkbox name="ids"  fieldValue="" cssClass="checkbox" "/>   <s:checkbox name="ids"  fieldValue="" cssClass="checkbox" "/>   <s:checkbox name="ids"  fieldValue="" cssClass="checkbox" "/></td>

Select類

1.jQuery實現下拉式清單的聯動，實現省份和城市的關聯

<script type="text/javascript">//實現省份和城市的二級聯動/*jQuery.post( url, [data], [callback], [type] ) ：使用POST方式來進行非同步請求,[]為可選屬性,此例子選了[data],[callback] 參數：url (String) : 發送請求的URL地址.data (Map) : (可選) 要發送給伺服器的資料，以 Key/value 的索引值對形式表示。callback (Function) : (可選) 載入成功時回呼函數(只有當Response的返回狀態是success才是調用該方法)。type (String) : (可選)官方的說明是：Type of data to be sent。其實應該為用戶端請求的類型(JSON,XML,等等) */function showCity(value){//通過action裡的showCity函數實現通過省份名字擷取對應省份下的城市列表,並返回相應的資料//{name:value}：value為省份下拉式清單傳過來的省份名字    $.post("${pageContext.request.contextPath}/company_showCity.action",{name:value} ,function(data,textStatuts){            //alert(data);            var dataObj=eval("("+data+")");            //alert(dataObj);                        //先刪除之前一次載入的城市            $("select[name='city'] option[value!='']").remove();                        //將城市封裝成option後加到select裡,格式如下            // <select name="city" style="width:90%">                //<option value="">--------</option>            //</select>            for(var i=0;i<dataObj.length;i++){                  var $option=$("<option></option>");                  $option.attr("value",dataObj[i].name);                  $option.text(dataObj[i].name);                  $("select[name='city']").append($option);            }     });}</script>

<tr><td>省份：</td><td>        <s:select list="#provinceList" name="province" id="province"                  listKey="name" listValue="name"                 headerKey="" headerValue="--------"                cssStyle="width:90%" onchange="showCity(this.value)">        </s:select></td><td>城市：</td><td>    <s:select list="{}" name="city" id="city"               headerKey="" headerValue="--------" cssStyle="width:90%" >    </s:select></td></tr>

company.action中的showCity函數

/**通過省份顯示對應城市 * @throws IOException **/public String showCity() throws IOException{//拿到jsp中省份的名字String name=request.getParameter("name");if(StringUtils.isNotBlank(name)){//通過省份名字拿到對應省份實體(下面查詢城市時,用來拿省份id)Province province=provinceService.findProvinceByName(name);//通過省份id查詢該省份下的所有城市List<City> cityList=cityService.findCityByPid(province.getId());//New一個JsonConfigJsonConfig config=new JsonConfig();//設定不要擷取的屬性列,只取city表裡的name屬性,根據自己定義的city表進行定義,config.setExcludes(new String[]{"id","pycode","pid","postcode","areacode"});//將List轉換為jsonArrayJSONArray jsonArray=JSONArray.fromObject(cityList,config);response.setCharacterEncoding("utf-8");//將jsonArray轉成字串後發送給jsp頁面response.getWriter().print(jsonArray.toString());}return null;}