jquery 构造json数据，填充datagrid

最新推荐文章于 2023-01-06 13:08:34 发布

robin嘟嘟

最新推荐文章于 2023-01-06 13:08:34 发布

阅读量1.4w

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签： datagrid json jquery function xmlhttprequest javascript

本文链接：https://blog.youkuaiyun.com/robinpipi/article/details/6597231

jquery 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了如何利用jQuery来构造符合Datagrid要求的JSON格式数据。Datagrid需要的数据结构包含"total"字段和"rows"数组，每个数组元素包含id和name属性。示例中提到了一个需求场景，涉及从一个页面选择人员ID和name，然后在另一个页面以列表形式显示，支持删除操作。

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

datagrid的数据格式要求是json格式的。

也就是说必须是：

｛"total":"2",

"rows":[

{"id":"2","name":"aa"},

{"id":"3","name":"bb"}

]

｝

id,name是datagrid的列。

以下是个例子。

有这么一个需求，点击选择，可以选择人员，选择后的人员为id和name用逗号分隔的字符串，点击删除，将选中的人员在另一个页面打开，为列表形式，可以进行删除。

<html>
<head>
/style>
</head>
<body class="docview">
   
			<table style="width: 100%; border: 1px solid #99BBE8;">
				   <tr>
                    <td align="right">加班人员：<span style="color: red;">(*)</span></td>
                    <td colspan=3><s:textfield readonly="true" id="overworkNames" name="overworkNames" style="width:500px;"></s:textfield>
                    	<a id="searchUsers" href="javascript:addOverworkUsers();" class="easyui-linkbutton" plain="true" icon="icon-search"></a>
                    	 <img src='www/images/action_delete.gif' style='cursor:pointer' id="deleteUser" οnclick="delUser();"/>
                    	<s:hidden id="overworkIds" name="overworkIds"></s:hidden>  
                    </td>
           </tr>
	</table>
	 <div id="userWin" style="padding:3px;display:none;">    	
        	<table id="userGrid" fit="true" ></table>       
    </div>
</body>
<SCRIPT type="text/javascript">
var users="";
$(document).ready(function(){
	//将加班人员做成一个json数据，以便删除人员使用。
	convertJson();
	//初始化删除人员div及datagrid
	initUserWin();
	initUserGrid();
});
//选择加班人员
function addOverworkUsers(){
	var result = window.showModalDialog("<%=basePath%>www/framework/group/departmentUsersIds.jsp","","center=yes;dialogHeight=420px;dialogWidth=700px");
    var userIds = $("#overworkIds").val();
    var userNames=$("#overworkNames").val();
    $.each(result,function(i,user){
    	if(userIds.indexOf(",")>0){
    		userIds=","+userIds;//解决无法匹配第一个人员的问题
    		userNames=","+userNames;
    	}
    	if(userIds.indexOf(","+user.id)<0){
    		userIds +=","+user.id;
	    	userNames+=","+user.name;
    	}
    	
    });
    
   if(userNames.indexOf(",")==0){
		$("#overworkNames").val(userNames.substring(1));
		$("#overworkIds").val(userIds.substring(1));
    }else{
    	$("#overworkNames").val(userNames);
		$("#overworkIds").val(userIds);
    }    
    convertJson();
}
//删除人员
function delUser(){
	$("#userWin").window("open");
	$("#userWin").window("resize");
	$("#userGrid").datagrid("loadData",$.parseJSON(users));
}
//初始化div
function initUserWin(){
	$("#userWin").show();
	//document.getElementById("userWin").style.display='block';
	$("#userWin").window({
        title:"删除加班人员",
        width:400,
        height:350,
        minimizable:false,
        closed:true,
        modal:true,
        closable:true,
        onClose:function(){
        	//刷新加班人员
	    }	    
    });
}
//初始化datagrid
function initUserGrid(){
	$("#userGrid").datagrid({
        toolbar:[{
            text:"删除",
            iconCls:"icon-remove",
            handler:updateUsers
        }],
        columns:[[
			{field:'ck',checkbox:true,width:20},
			{field:'id',hidden:true},
			{field:'name',title:'人员',width:100,align:'center',sortable:true}
        ]],
        onLoadSuccess:function(data){
            
        },

        onLoadError:function(XMLHttpRequest, textStatus, errorThrown){
            var sessionTimeout = XMLHttpRequest.getResponseHeader('sessionTimeout');
            if(sessionTimeout!=undefined&&sessionTimeout=='true'){
                document.location = 'login.index.action';
            }
    
            var error = XMLHttpRequest.getResponseHeader('error');
            if(error!=undefined){
                MSG.error("<s:text name='system.error.msg' />",error);
            }
        }
    });	
}
//将数据转换成json
function convertJson(){
	users="";
	var ids=$("#overworkIds").val();
	var names=$("#overworkNames").val();
	var idsArray=ids.split(",");
	var namesArray=names.split(",");
	users+="{\"total\":"+idsArray.length+",\"rows\":[";
	for(var i=0;i<idsArray.length;i++){
		if(i!=(idsArray.length-1)){
			users+="{\"id\":"+"\""+idsArray[i]+"\",\"name\":\""+namesArray[i]+"\"},";
		}else{
			users+="{\"id\":"+"\""+idsArray[i]+"\",\"name\":\""+namesArray[i]+"\"}";
		}				
	}	
	users+="]}";	
}
//删除后更新人员
function updateUsers(){
	//var a=$("#userGrid").datagrid("options").columns;
//alert(a.length);
var all=$("#userGrid").datagrid("getData");
var ousername="";
var ouserid="";
var selections = $("#userGrid").datagrid("getSelections");
for(var i=0;i<all.rows.length;i++){
	var contain=false;
	var user=all.rows[i];
	for(var j=0;j<selections.length;j++){
		var suser=selections[j];
		if(user.name==suser.name){
			contain=true;
			break;
		}
	}
	if(!contain){
		ousername+=","+user.name;
		ouserid+=","+user.id;
	}
}
if(ousername.indexOf(",")==0){
	$("#overworkNames").val(ousername.substring(1));
	$("#overworkIds").val(ouserid.substring(1));
}else{
	$("#overworkNames").val(ousername);
	$("#overworkIds").val(ouserid);
}
convertJson();
$("#userWin").window("close");
}
</SCRIPT>
</html>