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

本文介绍了一个基于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"/>">
&nbsp;
</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>&nbsp;&nbsp;'
 +'<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;
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值