Jquery DataGrid-----------小例子

最新推荐文章于 2025-05-22 11:28:32 发布

原创最新推荐文章于 2025-05-22 11:28:32 发布 · 4.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #function #javascript #stylesheet #url #exception

jquery 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一个基于SpringMVC架构的系统实现案例，详细展示了如何使用EasyUI完成前端界面设计与交互，并通过示例代码说明了数据网格的创建过程。

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

系统采用的是spring mvc架构，对*.html进行跳转处理。

稍微处理了下系统中的代码，有看到的同事别接怪哦

jsp：

<%@ page contentType="text/html; charset=UTF-8"%>
<%@include file="/WEB-INF/jsp/inxite/include/includes.jsp"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>XXXXXX</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" src="js/public.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/common-jquery.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/local/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/themes/icon.css">
<script type="text/javascript" src="<%=request.getContextPath()%>/ui/indexDataGrid.js"></script>

</head>
<body>
<form name="qf" method="POST">
<input type="hidden" id="ids" name="ids" value="">
</form>
<div style="width: 100%;">
<div id="panel" class="easyui-panel" title="指标项定义" style="width:'auto';padding:10px;background:#fafafa;" >
<div class="maincontopgao2" style="border: none;background:#FAFAFA;">
<table id="qt" width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="10%" style="text-align: right;">
指标名称：
</td>
<td width="10%">
<input type="text" name="indexName" id="indexName"
value=""
onkeydown="if (event.keyCode==13) queryData();" />
</td>
<td width="10%" style="text-align: right;">
指标类型：
</td>
<td width="15%" >
<gazx:SelectDictionary thisName="typeCode"
catalog="indextype" flag="true"
defaultValue=""
cssStyle="width:160px;" onchange="queryData()" />
</td>
<td width="10%" style="text-align: right;">
考核类型：
</td>
<td width="15%" >
<gazx:SelectDictionary thisName="assessType"
catalog="assesstype" flag="true"
defaultValue=""
cssStyle="width:160px;" onchange="queryData()" />
</td>
<td width="5%">
<input type="button" value="查询" class="inputButton"
onClick="javascript:queryData();" style="cursor: hand;" />
</td>
<td width="5%">
<input type="button" value="重置" class="inputButton"
onClick="javascript:resetQuery('qt');"
style="cursor: hand;" />
</td>

</tr>
<tr>
<td colspan="9"> <hr></td>
</tr>
<tr>
<td colspan="9" height="38px">
<input <gaotime:BtnControl url="788"/> id="subBtn" type="button" value="批量删除" class="inputButton"
onClick="javascript:batchDel();"
style="cursor: hand; width: 100px;" /><input id="upd" type="hidden" value="<gaotime:BtnControl url="789"/>">
 
</td>
</tr>
</table>
</div>
<table id="dataShow" width="100%"></table>
</div>
</div>
<script>
var url = 'getIndexData.html';//请求的url
var queryParams = addQueryParams(); //////获得界面的参数,拼装好
createDataGrid(queryParams,url);
</script>
</body>
</html>

js:

//增加页面查询参数
function addQueryParams(){
var indexName = $('#indexName').attr('value');
var typeCode = $('#typeCode').attr('value');
var assessType = $('#assessType').attr('value');
var pageQuery = {'indexName':indexName,'typeCode':typeCode,'assessType':assessType};
return pageQuery;
}

/*
* 创建表格数据视图
* @param params 查询参数
* @param url 异步获取数据的地址
* @param cols 动态显示列
*/

//////////////////////////简单的指定了默认排序的列
function createDataGrid(params,url){
$(function(){
$('#dataShow').datagrid({
width:'auto',
height:'auto',
nowrap: false, ////设置为true，当数据长度超出列宽时将会自动截取。
striped: true, /////设置为true将交替显示行背景。
collapsible:true,
queryParams:params, /////组装好的界面的请求参数
url:url, //////传入的请求url
sortName: 'updateDate', //////排序字段,当表格初始化时候的排序字段
sortOrder: 'desc', //////定义排序顺序
remoteSort: true, ////////定义是否通过远程服务器对数据排序,在服务器端进行排序
idField:'indexId', //////表明该列是一个唯一列。
rownumbers:true, /////设置为true将显示行数。
columns:[[
{field:'ck',checkbox:true}, //////第一列展示复选框
{field:'indexName',title:'指标名称',width:300,align:'center',
formatter:function(value,rowData,index){
var val=rowData.isSystem;
if(val =='0'){
return value;
}else{
return '<font color="red">'+value+'</font>';
}
}},
{field:'typeName',title:'指标类型',width:100,align:'center'},
{field:'assessType',title:'考核对象类型',width:100,align:'center',
formatter:function(value,rec){
var val='';
if(value =='01'){
val = 'AAAA';
}else{
val = 'BBBB';
}
return val;
}},
{field:'updateDate',title:'最后更新时间',width:180,align:'center',sortable:true},

//////可以进行相应的连接挂载
{field:'indexId',title:'操作',width:100,align:'center',
formatter:function(value,rowData,index){
var res = '<a href="javascript:void(0);" style="text-decoration: underline;" onclick="javascript:ShowWindow(\'950\',\'600\','
+'\'detailIndex.html?indexId='+rowData.indexId+'\',\'详情\');" >详情</a>  '
+'<a '+ $('#upd').attr('value')+' href="javascript:void(0);" style="text-decoration: underline;" '
+'onclick="javascript:ShowWindow(\'950\',\'600\',\'modifyIndex.html?indexId='+rowData.indexId+'\',\'修改\');" >修改</a>';
return res;
},
styler:function(value,rowData,index){
return 'cursor: hand; ';
}
}
]],
pagination:true, ///////设置true将在数据表格底部显示分页工具栏。
pageSize:10, //////默认每页显示10行
pageList:[10,20,30,40,50,60] ///////可选的列表
});
});
}

/*
* 创建表格数据视图
* @param params 查询参数
* @param url 异步获取数据的地址
* @param cols 动态显示列
*/

///////指定可编辑的列，当选择行时可以进行编辑
function createGrid(params,url){
$(function(){
$('#dataShow').datagrid({
width:'auto',
height:'auto',
nowrap: false,
striped: true,
collapsible:true,
queryParams:params,
url:url,
sortName: 'indexName',
sortOrder: 'asc',
remoteSort: true,
idField:'indexId',
rownumbers:true,
columns:[[
{field:'ck',checkbox:true},
{field:'indexName',title:'指标名称',width:200,align:'center'},
{field:'scoreUp',title:'分数(上限)',width:100,align:'center',editor:{type:'numberbox'}}, ///////指定该列可以进行编辑,且只能输入数字
{field:'scoreDown',title:'下限',width:100,align:'center',editor:{type:'numberbox'}} ///////指定该列可以进行编辑

{field:'indexId',title:'常量参数',width:200,align:'center',
formatter:function(value,rec){
return '<span style="color:red">详细</span>';
}
}
]],

///////工具栏，在表格上面会有相应的操作按钮
toolbar:[{
id:'btnSave',
text:'保存设置',
iconCls:'icon-save',
handler:function (){
saveData(); ///////保存相应的记录
}
}],
onBeforeLoad:function(){
$(this).datagrid('rejectChanges'); //////回滚所有被删除的行。
},
onClickRow:function(rowIndex){
$('#dataShow').datagrid('beginEdit', rowIndex); //////开始编辑一行。
}
});
});
}

/*
* 创建表格数据视图
* @param params 查询参数
* @param url 异步获取数据的地址
* @param cols 动态显示列
*/

///////指定可编辑的列，当选择行时可以进行编辑,指定哪些列可以进行排序
function createDataGrid(params,url){
$(function(){
$('#dataShow').datagrid({
width:'auto',
height:fixHeight(0.71),
nowrap: false,
striped: true,
collapsible:true,
queryParams:params,
url:url,
sortName: 'assessMonth',
sortOrder: 'desc',
remoteSort: true,
idField:'id',
rownumbers:true,
columns:[[
{field:'ck',checkbox:true},
{field:'investName',title:'员工姓名',width:100,align:'center'},
{field:'investDeptName',title:'所属部门',width:200,align:'center'},

{field:'gatherDate',title:'统计月份',width:100,align:'center',sortable:true, /////指定可以进行排序
formatter:function(value,rec){
return value.substring(0,7);
}
},
{field:'deptComp', title:'投诉1', width:100,align:'center',sortable:true,
formatter:function(value,rowData,index){
var res = '<span onclick="javascript:queryComp(\''+ rowData.id+'\',\''
+rowData.investId+'\',\''+rowData.investName+'\',\''+rowData.investDeptId
+'\',\''+rowData.assessType+'\',\''+rowData.investDeptName+
'\',\''+rowData.gatherDate.substring(0,7)+'\');"> '+value+' </span>';
return res;
},
styler:function(value,rowData,index){
return 'text-decoration:underline;cursor: hand; ';
}
},
{field:'other',title:'投诉2',width:100,align:'center',editor:{type:'numberbox'},sortable:true, //////可以编辑可以排序
formatter:function(value,rec){
return '<span style="color:red;">'+value+'</span>';
}
},
{field:'total',title:'总投诉次数',width:100,align:'center',sortable:true},
{field:'updateDate',title:'更新时间',width:200,align:'center',sortable:true}
]],
toolbar:[{
id:'btnSave',
text:'保存',
iconCls:'icon-save',
handler:function (){
saveData();
}
}],
onBeforeLoad:function(){
$(this).datagrid('rejectChanges');
},
onClickRow:function(rowIndex){
$('#dataShow').datagrid('beginEdit', rowIndex);
},
pagination:true,
pageSize:10,
pageList:[10,20,30,40,50]

});
});
}

spring controller : method:

/**
* 异步获取指标项列表
* @param request
* @param response
* @return
* @throws Exception
*/
public ModelAndView getIndexDataHandler(HttpServletRequest request, HttpServletResponse response) throws Exception{

// 页面参数
String pageNoStr = Utils.trim(request.getParameter("page")); //////界面页数
int pageNo = Utils.parseInt(pageNoStr, 1);
String pageSizeStr = Utils.trim(request.getParameter("rows"));
int pageSize = Utils.parseInt(pageSizeStr, Constants.WEB_PAGE_SIZE);
// 排序
String orderByFlag = Utils.trim(request.getParameter("order"));
String orderByName = Utils.trim(request.getParameter("sort"));
if (!Utils.strIsNull(orderByName)) {
if ("desc".equals(orderByFlag)) {
orderByFlag = TableMap.getAssessMarkGatherMap().get(orderByName) + " " + "DESC";
} else {
orderByFlag = TableMap.getAssessMarkGatherMap().get(orderByName) + " " + "ASC";
}
}

//////访问后台，获得resp

List resultList = new ArrayList();
int count = 0;
resultList = ((DataList)resp.getReturnObject()).getList();
count = ((DataList)resp.getReturnObject()).getCount();

StringBuffer result = new StringBuffer("");

///////将请求返回的列表进行转换成json字符串，对其中的date按照指定的格式进行转换
String json = JsonParseUtils.listToJSONFormat(resultList, "yyyy-MM-dd HH:mm:ss");
result.append("{\"total\":")
.append(count)
.append(", \"rows\":")
.append(json)
.append("}");

//////直接写出到界面
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
out.print(result);
return null;
}