Jquery EasyUI
一、easyui的datagrid列表实现
Form：
<form name="queryForm" id="queryForm" action="" method="post">
<div class="pageMain">
<div class="pageTitle">对内背书</div>
<div class="pageBody">
<table class="tableFrom">
<tr>
<td class="td01"></td>
<td class="td02">交易流水号：</td>
<td class="td03">
<input type="text" name="apply_no" id="apply_no" value="" />
</td>
<td class="td01"></td>
<td class="td02">备注：</td>
<td class="td03">
<input type="text" name="memo" id="memo" value="" />
</td>
</tr>
<tr>
<td class="td01"></td>
<td class="td02">票据账户：</td>
<td class="td03">
<input type="text" name="manage_account" id="manage_account" value="" />
<input type="hidden" name="manage_account_id" id="manage_account_id" value="" />
<input type="hidden" name="manage_account_name" id="manage_account_name" value="" />
</td>
</tr>
<tr>
<td class="td03" colspan="6" align="right">
<input type="button" class="button" value="查找" id="butQuery" />
</td>
</tr>
</table>
<table width="100%">
<tr>
<td>
<table id="datagrid"></table>
</td>
</tr>
</table>
</div>
</div>
</div>
<div id="dialog" >
</div>
</form>
Js的datagrid部分代码
<script type="text/javascript">
var url = "";
$(document).ready(function(){
$("#butQuery").click(function(){
exp = $('#queryForm').specialCharacterFormValidate();
if(exp == false) {
return;
}
if(exp==true){
$('#datagrid').datagrid("reload",$('#queryForm').serializeObject());
}
});
$('#datagrid').datagrid({
width:document.documentElement.clientWidth - 50,
height:'400',
nowrap:true,
formid:'queryForm',
autoRowHeight:false,
striped:true,
url:"${systemctx}/draft/endorsor/queryEndorsorApply4DataGrid.json?business_type=BS01",
sortName:'id',
sortOrder:'asc',
remoteSort:false,
idField:'id',
pagination:true,
rownumbers:true,
showFooter:true,
columns:[[
{title:'交易流水号',field:'apply_no',width:120,sortable:true,align:"center", formatter:function(value, row, index){
if(!value == false) {
var id = row.id;
return '<a href="#" onClick="fnDraft(\''+ id +'\')">'+ value +'</a>';
}
}
},
{title:'id',field:'id',hidden:true},
{title:'票据账户',field:'account_code',width:100,align:"center"},
{title:'票据账户名',field:'account_name',width:100,align:"center"},
{title:'背书总金额',field:'total_amount',width:100,align:"center"},
{title:'总笔数',field:'total_number',width:100,align:"center"},
{title:'持票人',field:'sname',width:100,align:"center"}, {title:'被背书人',field:'endorsee_name',width:100,align:"center"},
{title:'背书合同号',field:'endorsor_no',width:100,align:"center"},
{title:'状态',field:'v_status',width:100,align:"center"},
{title:'备注',field:'memo',width:100,align:"center"},
{title:'提交时间',field:'modtime',width:150,align:"center"}
]],
toolbar:[
{
text:'新增流水',iconCls:'icon-add',handler:function(){
$('#dialog').dialog({
title: '新增流水',
width: 600,
height: 450,
closed: false,
cache: false,
href: "${systemctx}/draft/endorsor/linkEndorsorApply.web?business_type=BS01",
modal: true
});
}
},
{
text:'修改流水',iconCls:'icon-edit',handler:function(){
var rows = $('#datagrid').datagrid('getSelections');
if(rows.length==0){
$.messager.alert("错误","请选择一条记录修改");
return;
}else if(rows.length>1){
$.messager.alert("错误","只能选择一条记录修改");
return;
}else{
var row=rows[0];
var id=row.id;
fnModify(id);
rows.length = 0;
//清除easyui的选中的缓存
$('#dataGrid').datagrid('clearSelections');
}
}
},
{
text:'导出当前列表',iconCls:'icon-export',handler:function(){
//$message.alert("导出当前列表成功");
alert("导出当前列表成功");
}
}
,
{
text:'导出所有列表',iconCls:'icon-export',handler:function(){
//$message.alert("导出所有列表成功");
alert("导出所有列表成功");
}
}
]
});
});
注意：
数据表格（DataGrid）的特性
列（Column）的特性
Datagrid后台实现：url:"${systemctx}/draft/endorsor/queryEndorsorApply4DataGrid.json?business_type=BS01"
Java代码：
/**
*背书申请列表查询方法
*/
@SuppressWarnings("unchecked")
@RequestMapping(value="/draft/endorsor/queryEndorsorApply4DataGrid.json",method=RequestMethod.POST)
publicvoid queryEndorsorApply4DataGrid(HttpServletRequest request,HttpServletResponse response,Model model){
//用于ajax请求后的返回
DataResult dataResult = null;
//用于放大镜相关参数的处理
PangingParam pangingParam = null;
DataGrid dataGrid = null;
//对参数进行解析
try{
pangingParam = (PangingParam) ServletUtils.getParametersToBaseEntity(request,PangingParam.class);
}catch (ControllerException e) {
thrownew ControllerException("查询异常",e,getUserContext());
}
//获取分页查询语句
String strId="";
try{
Map<String,Object> paramMap=ServletUtils.getParametersToHashMap(request);
strId = endorsorService.queryEndorsorApply4DataGrid(paramMap);
}catch (Exception e) {
thrownew ControllerException("查询异常，原因：获取查询语句错误", e,getUserContext());
}
try{//设置查询参数
dataGrid = new DataGrid();
dataGrid.setPangingParam(pangingParam);
dataGrid.setSql(strId);
//获取查询结果
long resultCount = dataGridService.findResultCount(dataGrid);
List resultList = dataGridService.findResultList(dataGrid);
//配置查询的页面样式
DataStyle dataStyle = new DataStyle();
dataStyle.setPageIndex(pangingParam.getPage());
dataStyle.setDataCount(resultCount);
dataStyle.setDataList(resultList);
//配置页面列表中的列
dataStyle.addDepict("id",DataTypeConstant.LONG);
dataStyle.addDepict("apply_no",DataTypeConstant.STRING); dataStyle.addDepict("account_code",DataTypeConstant.STRING);
dataStyle.addDepict("account_name",DataTypeConstant.STRING);
dataStyle.addDepict("total_amount",DataTypeConstant.AMOUNT_2);
dataStyle.addDepict("total_number",DataTypeConstant.LONG);
dataStyle.addDepict("sname",DataTypeConstant.STRING);
dataStyle.addDepict("endorsee_name",DataTypeConstant.STRING);
dataStyle.addDepict("endorsor_no",DataTypeConstant.STRING);
dataStyle.addDepictByFunction("v_status",DraftSysConstant.V_STATUS.class,"getName",new Class[]{String.class});
dataStyle.addDepict("memo",DataTypeConstant.STRING);
dataStyle.addDepict("modtime",DataTypeConstant.DATETIME);
dataResult = PangingTools.buildResultPagerInfo(dataStyle);
if(pangingParam.getReportExportType() == 0){
response.getWriter().write(JSONFactory.toJSONString(dataResult,getUserContext()));
}else{
JasperPrintUtil.dataGridPrint(request,response,getUserContext(),dataResult,pangingParam);
}
}catch(Exception e){
e.printStackTrace();
thrownew ControllerException("查询信息产生异常",e,getUserContext());
}
}
dataStyle.addDepict中添加的对值和columns的field一一对应
二、Dialog（对话框窗口）
Datagrid里面有个toolbar工具栏，在列表上方显示，和dialog对话框结合使用，对列表数据进行操作
toolbar:[
{
text:'新增流水',iconCls:'icon-add',handler:function(){
$('#dialog').dialog({
title: '新增流水',
width: 600,
height: 450,
closed: false,
cache: false,
href: "${systemctx}/draft/endorsor/linkEndorsorApply.web?business_type=BS01",
modal: true
});
}
},
{
text:'修改流水',iconCls:'icon-edit',handler:function(){
var rows = $('#datagrid').datagrid('getSelections');
if(rows.length==0){
$.messager.alert("错误","请选择一条记录修改");
return;
}else if(rows.length>1){
$.messager.alert("错误","只能选择一条记录修改");
return;
}else{
var row=rows[0];
var id=row.id;
fnModify(id);
rows.length = 0;
//清除easyui的选中的缓存
$('#dataGrid').datagrid('clearSelections');
}
}
},
{
text:'导出当前列表',iconCls:'icon-export',handler:function(){
//$message.alert("导出当前列表成功");
alert("导出当前列表成功");
}
}
,
{
text:'导出所有列表',iconCls:'icon-export',handler:function(){
//$message.alert("导出所有列表成功");
alert("导出所有列表成功");
}
}
]
相关推荐
jquery EasyUI的API，方便使用easyui查看。。。。。。
jquery easyui 帮助文档 非常好用的
jquery easyui demo 网页下载下来打包了，还有datagrid简要说明
jqueryEasyUI 下载，及api下载 jqueryEasyUI 下载，及api下载
jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档...
jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像（onMouseOver/onMouseOut） Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件，源码奉献！！！
jQuery EasyUI 1 4版本更新内容： Bug（修复） menu：修复在删除一个菜单项的时候该菜单无法正确自适应高度的问题； datagrid：修复在datagrid宽度太小的时候“fitColumns”方法无法正常工作的问题 Improvement...
jQuery EasyUI 1.4.2 版 API 中文版手册
jQuery EasyUI 1.5API 中文版文档 最新版jQuery easy ui
jQuery EasyUI EasyUI 组件范例
jQuery EasyUI 1.4.3 API 中文 jQuery EasyUI 1.4.3 API jQuery EasyUI 1.4.3 API
jQuery EasyUI中文参考手册.chm
使用Jquery EasyUI制作的日历，单击input控件弹出日历选择日期，代码很简单，仅供参考
jQuery EasyUI 1.5.1文档 jQuery EasyUI 1.5.1文档 jQuery EasyUI 1.5.1文档
资源名称：Jquery easyui 使用说明内容简介：Jquery easyui 使用说明 中文PDF版主要讲述的是Jquery easyui 使用说明;感兴趣的朋友可以过来看看。jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的...
jquery easyui 中文api文档 jQuery EasyUI 1.2.4+API.chm jquery.easyui-1.2.6API.chm jquery.EasyUI-1.3.1 API_疯狂秀才.chm
jQuery EasyUI 1.5.1 版 API 中文(高清)版以及PDF(高清)版. 文档详细介绍了easyui相关属性,使用方法;在1.5的基础上修复了一些bug,并且新增了一些组件.
jQueryEasyUI是目前JavaWeb领域流行的插件开发工具。《jQueryEasyUI开发指南》主要讲述EasyUI各种插件的用法以及前端插件开发思想，带领读者走入插件开发的世界。在本书中，读者不但可以学到搜索框（searchbox）、...
SSH+Jquery easyUI后台管理系统
jQueryEasyUI