easyUI datagrid

王旭龙 发布于 2013/05/05 21:15
阅读 2K+
收藏 1
easyUI datagrid 如何自动填充后台返回的数据,后台的返回的JSON数据格式是什么样的??为什么这样返回??
加载中
1
劲松
劲松

JSON:

{"total":81,"rows":[{"id":250,"jobNumber":null,"state":"1","userLoginName":"test2","userLoginPwd":null,"userName":"1234","userRole":5},{"id":249,"jobNumber":"2417","state":"1","userLoginName":"2417","userLoginPwd":null,"userName":"陈艺妮","userRole":1},{"id":248,"jobNumber":"006","state":"1","userLoginName":"0006","userLoginPwd":null,"userName":"曲峡","userRole":1}]}

0
逝水fox
逝水fox
自己看官方文档,写的那么清楚的
0
专业打酱油
专业打酱油
不得不说,easyui的文档,还是相当不错的!
0
劲松
劲松

JSP:

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<%@ include file="/commons/children-commons.jsp"%>
<%@ include file="/commons/easyui-commons.jsp"%>
<%@ include file="/commons/datagrid-commons.jsp"%>
<style type="text/css">
body{
margin: 0;
}
</style>
<script type="text/javascript" src="js/userlist.js"></script>
</head>
<body style="visibility: visible;">
<table id="userview" 
rownumbers="true" 
pagination="true"
fitColumns="true" 
singleSelect="true"
pageSize=20
toolbar="#tb"
url="${pageContext.request.contextPath}/e4c36415e4496ab905a8b8ad4978e8bd"
>
<thead>  
       <tr>  
           <th field="userName"align="left" width="80">用户姓名</th>  
           <th field="userLoginName" align="left" width="80">登录用户名</th>  
           <th field="jobNumber" align="center" width="50">工号</th>  
           <th field="state" align="center" width="50" formatter="stateFormatter">状态</th>  
           <th field="userRole" align="left" width="80" formatter="roleFormatter">用户角色</th>
       </tr>  
    </thead>
</table>

<div id="tb">  
   <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:showAddUserPage();">新增</a>  
   <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:deleteUser();">删除</a>
   <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="javascript:showModifyUserPage();">编辑</a>  
</div> 
</body>

</html>

JS:

$(function(){
outRoles();

$('#userview').datagrid({

});
});


//用户角色集合
var roles = [];


//加载所有可用的用户角色信息
function outRoles(){
$.ajax({
url : '1b53bb09f9f684f9409fa6df2b449633',
type : 'POST',
dataType : 'json',
success : function(data){
roles = data.roles;
}
});
}


//格式化状态信息 
function stateFormatter(value){  
    return (value==='1')?'激活':'禁用';  
}


//格式化用户角色信息 
function roleFormatter(value){  
    for(var i=0; i<roles.length; i++){  
        if (roles[i].id == value) return roles[i].roleName;  
    }  
    return value;  
}


function showAddUserPage(){
window.location.href="useradd.jsp";
}


function showModifyUserPage(){
var selected = $('#userview').datagrid('getSelected');
if(null==selected){
$.messager.alert('提示','请选择要操作的数据项!','warning');
}else{
window.location.href="usermodify.jsp?id="+selected.id;
}
}


function deleteUser(){
var selected = $('#userview').datagrid('getSelected');
if(null==selected){
$.messager.alert('提示','请选择要操作的数据项!','warning');
}else{
$.messager.confirm('警告','您确定要删除用户[<font color="red">'+selected.userName+'</font>]吗?',function(b){
if(b){
var win = $.messager.progress({  
   title:'提示',  
   msg:'正在删除数据,请稍后...'
});
$.ajax({
type: "POST",
url:'7c31e8d9cae1b3d8df62c7b2574ec5be',
data:{id:selected.id},
dataType: "json",
success: function(data) {
var flag = data.flag;
if(flag==0){
$.messager.progress('close');
$('#userview').datagrid('deleteRow',$('#userview').datagrid('getRowIndex',$('#userview').datagrid('getSelected')));
}else if(flag==2){
$.messager.progress('close');
$.messager.alert('提示','删除数据出错!','error');
}else if(flag==4){
$.messager.progress('close');
$.messager.alert('提示','系统内置帐户,不允许删除!','warning');
}
}
});
}
});
}
}

data:

JSON:

"total":81,"rows":[{"id":250,"jobNumber":null,"state":"1","userLoginName":"test2","userLoginPwd":null,"userName":"1234","userRole":5},{"id":249,"jobNumber":"2417","state":"1","userLoginName":"2417","userLoginPwd":null,"userName":"陈艺妮","userRole":1},{"id":248,"jobNumber":"006","state":"1","userLoginName":"0006","userLoginPwd":null,"userName":"曲峡","userRole":1}]

0
平安北京
多看官方的demo
返回顶部
顶部