jquery、js与jsp实现分页、全选、级联互动、自定义属性、json、rowspan

本文链接：https://blog.youkuaiyun.com/yongzhian/article/details/34434611

本文介绍了一系列前端开发实用技巧，包括jQuery分页插件使用、表格全选功能实现、级联选择框互动效果、自定义select选项属性及JSON数据处理等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

乱码 action assetPlace = URLDecoder.decode(assetPlace,"UTF-8");

jsp assetName=encodeURI(encodeURI(assetName)); //中文乱码

1、分页 jquery的pagination

这里采用在struts2中 action返回string再映射到jsp页面

var beginRecord = 0;
var currentPage = 0;
var maxRecord = 20;分页请求数据

function getStudentInsuranceByCondition(status) {
	if (status) {
		beginRecord = 0;
		currentPage = 0;
                maxRecord = 20; 
        }

         $.ligerDialog.waitting("查询中，请稍候.....");
	$.ajax({
		type : "post",
		url : "<%=path%>/stuinsurance/stuinsurance!grid.action",
		dataType : "html",
		data : {
			areaId :areaId,
			orgmanId : orgmanId -- 注意这里不要敦化否则ie可能失效
		},
		success : function(data) {
			$("#stuInsurance_Grid").html(data);
			$.ligerDialog.closeWaitting();
		},
		error : function() {
			$.ligerDialog.closeWaitting();
			$.ligerDialog.error("加载数据出错误！");
		}
	});
}

function pageselectCallback(page_id, perpage, jq) {
 beginRecord = page_id * perpage;
 maxRecord = perpage;
 currentPage = page_id;
 getStudentInsuranceByCondition(false);
}

 $(function(){//在grid页面中
        $("#pager").pagination(<%=request.getAttribute("totalCount")%>, {items_per_page : maxRecord ,current_page : currentPage,callback: pageselectCallback});
   $("#totalInfo").html("查询结果共："+<%=request.getAttribute("totalCount")%>+"&nbsp;条数据"); 
 });

2、全选

th中

<input type="checkbox" id="selectAll" name="selectAll" onclick="selectAll()" />
td中

function selectAll(){ 
		var str = $('#selectAll').prop('checked');
		if(str){
			$("input[name='magbox']").each(function(){	
				if($(this).prop("disabled")){
					$(this).prop("checked",false);
				}else{
					$(this).prop("checked",true);
				}
			});	
		}else{
			$("input[name='magbox']").each(function(){
	  			 $(this).prop("checked",false);
			});
		}
}

或

//级联全选
function casecadeselectroom(object){
    var state = object.checked;
    var casecadechekbox = $("#searchroomTable input[name='planuserinfo']");
    $(casecadechekbox).each(function(index,object){
          $(object).attr("checked",state);
    })
 }

3、级联互动

<select style="width: 40px;" id="canPreSelect${status.index+1}" onchange="changeSumPre()">
            <c:forEach begin="1" end="${x.canPre}" step="1" varStatus="s">
             <option>${x.canPre-s.index + 1} </option>
            </c:forEach> 
           </select>

//更改预分床位或者选项时	更改合计
function changeSumPre() {
	var _checkbox = $("#searchroomTable > tbody").find("input[type='checkbox']:checked"); 
	var sumPre = 0;
	if (_checkbox.length == 0) {
		$("#sumPre").val(0); 
	} else {
		$(_checkbox).each(function() {
			sumPre = Number(sumPre) + Number($(this).parent().prev().children(0).val());
		}) 
	} 
	$("#sumPre").html(sumPre);
}

4、自定义属性

<select id="gradeNameValue" onchange="changeStuRwardGrade($(this),${x.stuId },${x.stuRewardInfoId},${x.money },${x.gradeId})">
									<c:forEach items="${x.rewardGradeList }" var="rgl" >
										<c:if test="${x.gradeName==rgl.rewardgradeName }">
												<option selected="selected" value="${rgl.rewardgradeId }" <span style="color:#ff9966;"> <strong>moneyValue="${rgl.money }"></strong></span>${rgl.rewardgradeName }</option>
										</c:if>
										<c:if test="${x.gradeName!=rgl.rewardgradeName }">
												<option moneyValue="${rgl.money }" value="${rgl.rewardgradeId }">${rgl.rewardgradeName }</option>
										</c:if>
									</c:forEach>
								</select>

 给指定学生设置等级 obj当前select对象 stuId当前学生id stuRewardInfoId 当前奖学金中间表id 
 *  oldMoney  oldGradeId  修改前的id和金额 用于id还原和金额判断
 */  
function changeStuRwardGrade(obj,stuId,stuRewardInfoId,oldMoney,oldGradeId){
	var rewardmanagerId = $.trim($("#rewardmanagerId").val());//奖学金ID  
	//先实时获取当前奖学金已经分配的总额
	$.ajax({
		type:'post',
		async:false,
		url:'<%=path%>/scholarshipreward/scholarshipreward!getAlreadyMoneyByRewardManagerId.action',
		data:{                                              
			'rewardManagerId':rewardmanagerId
		},
		success:function(result){  
			$("#alreadyMoney").val(result);
		},
		error:function(){
			$.ligerDialog.alert('系统错误！', '提示', 'error');
			return;
		}
	});
	var rewardmanagerMoney = $("#rewardmanagerMoney").val();//奖学金总金额 
	var alreadyMoney=$("#alreadyMoney").val();//已经分配金额
	if(alreadyMoney==null||alreadyMoney==""){
		alreadyMoney = 0;
	}
	if(rewardmanagerMoney==null||rewardmanagerMoney==""){
		rewardmanagerMoney = 0;
	}
	var preMoney = obj.find("option:selected").attr("moneyValue");
	if(preMoney==null||preMoney==""){
		preMoney = 0;
	}
	if(preMoney>rewardmanagerMoney-(alreadyMoney-oldMoney)){
		$.ligerDialog.alert('预分配金额大于总金额！', '信息', 'error');
		obj.val(oldGradeId);//还原
		return;
	}  ...

5、json 需要加入 json.lib.2.3-jdk13.jar

//获取多选框信息拼接josn字符串
function josnSplice(){
     uJosn = '{tJosn:[';
        var str = '';
        $("input[name='magbox']:checked").each(function(){
                 uJosn += '{"uId":"'+$(this).prop('value')+'"},';
                 str += $(this).prop('value')+',';
        });
        if(str == ''){
            $.ligerDialog.alert('请选择记录！', '信息', 'error');
            return '';
        }
        var reg = /,$/gi;
        uJosn = uJosn.replace(reg, "");
    uJosn += ']}';
    return uJosn;
}

解析

String uJosn = "{zhangsan:[{'name':'张生'},{'age':'20'},{'mobile':'13678'},{'fix':'9999'}]," +
				" lisi:[{'name':'李四'},{'age':'22'},{'mobile':'189565'},{'fix':'888'}]   }";
		JSONObject jsonObj = JSONObject.fromObject(uJosn);
		Iterator iter = jsonObj.keys();
		// 遍历json数据
		while(iter.hasNext()){
			String key_str = (String) iter.next();
			
			JSONArray array = jsonObj.getJSONArray(key_str);
			System.out.println(key_str + "  " + array.size());
			for (int i = 0; i < array.size(); i++) {
				JSONObject jsonObject = (JSONObject) array.get(i);
				System.out.println(jsonObject.get("fix"));
			}
		}

JSONArray jsonArray = JSONArray.fromObject("[1,2,3]");
		for (int i = 0; i < jsonArray.length(); i++) {
			System.out.println(jsonArray.getInt(i));//打印 1  2  3
		}

String s = "{a:[{id:11,score:5.389},{id:27,score:15.3} ]}";
		 JSONObject jsonObj = JSONObject.fromObject(s);
			Iterator iter = jsonObj.keys();
			// 遍历json数据
			while (iter.hasNext()) {
				String key_str = (String) iter.next();
				JSONArray array = jsonObj.getJSONArray(key_str);

				for (int i = 0; i < array.length(); i++) {
					JSONObject jsonObject = (JSONObject) array.get(i);
					 System.out.println(jsonObject.get("id")); //打印 11   27
				}
			}

6、rowspan

<tr> 
							<th width="15%" rowspan="2">操作</th>
							<th width="60px" rowspan="2">序号</th>
							<th width="9%" rowspan="2">年级</th>
							<th width="12%" rowspan="2">专业</th>
							<th width="12%" rowspan="2">行政班</th>
							<th width="12%" rowspan="2">班主任</th>
							<th width="16%" colspan="2"> 男 </th> 
							<th width="16%" colspan="2"> 女 </th> 
						</tr>
						<tr>
							<th>预分寝室</th>
							<th>预分床位</th>
							<th>预分寝室</th>
							<th>预分床位</th>
						</tr>