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 是一个基于 jQuery 的前端框架，它封装了一系列的 jQuery 插件，为开发者提供了构建用户界面的简便方法。这个“jquery easyui datagrid demo”包含了一些关于如何使用 jQuery EasyUI 中 Datagrid 组件...
jQuery EasyUI 是一个基于 jQuery 的前端框架，它简化了网页用户界面开发，提供了丰富的组件和功能。这个“jQuery EasyUI 帮助文档”包含了全面的API参考和使用指南，对于开发者来说是极具价值的资源。 jQuery ...
**jQuery EasyUI 知识点详解** jQuery EasyUI 是一个基于 jQuery 的前端框架，它提供了一系列的 UI 组件，使得开发者能够快速构建出美观且功能丰富的 Web 应用程序。这个框架大大简化了网页界面的设计工作，使得...
在初试 Jquery EasyUI 的 Demo 中，你可以通过阅读 `初试JqueryEasyUI.docx` 和 `初试JqueryEasyUI.mht` 文件了解详细步骤和示例代码。`EasyUIDemo` 文件可能是包含实际演示的 HTML 和 JavaScript 代码，可以运行...
- **EasyUI 组件**: EasyUI 将jQuery的功能进一步扩展，提供了如`datagrid`（数据网格）、`panel`（面板）、`dialog`（对话框）等丰富的UI组件。 2. **组件的使用**： - **初始化组件**: 使用`$(selector)....
jQuery EasyUI 是一个基于 jQuery 的前端框架，它简化了网页用户界面开发，提供了一系列易于使用的组件，如对话框、表格、菜单、按钮等。版本 1.5.1 是一个重要的更新，它不仅包含了之前版本的所有功能，还进行了...
JQuery EasyUI 是一个基于 jQuery 的轻量级前端框架，它提供了一系列的 UI 组件，如对话框、表格、树形菜单、按钮等，用于快速构建用户界面。在这个"Jquery EasyUI 日历Demo"中，我们将探讨如何利用 EasyUI 的日历...
《jQuery EasyUI、ZTree与折线图的综合应用》 在Web开发中，jQuery EasyUI、ZTree和折线图是三种常见的组件，它们分别用于构建用户界面、实现树形结构展示和数据可视化。本篇文章将深入探讨这些技术及其在实际项目...
最新版本的jQuery EasyUI 1.3.6版全中文API汉化文档火热出炉，由于很多人和我要chm格式的，所以本次API我提供了2种版本的API，一个还是以前的EXE格式，另外一个就是人气颇高的chm格式。本次还将EasyUI 1.3.6版直接...
jQuery EasyUI 是一款非常棒的WEB前端UI框架，很多朋友都在找jQuery EasyUI API 中文文档，本次给大家提供的就是jQuery EasyUI v1.3.5官方API中文版，有需要的拿去用吧
**基于JQueryEasyUI类库的WebForm控件库** JQueryEasyUI是一个基于jQuery的UI框架，它封装了一系列的JavaScript组件，使得开发者能够轻松创建出功能丰富的Web应用程序界面。这个WebForm控件库是专门为.NET平台设计...
SSH+jQuery EasyUI后台管理系统是一种基于Struts2（S）、Spring（S）和Hibernate（H）三大开源框架的Web应用程序开发模式，结合jQuery EasyUI前端框架，构建出高效、简洁且具有现代感的后台管理界面。这个系统设计的...
jQuery EasyUI 是一个基于 jQuery 的前端开发框架，它简化了网页界面的构建，提供了一系列的 UI 组件，如对话框、表格、下拉菜单、树形结构等。这个参考资源合集包含了三个重要的文档，分别为 jQuery EasyUI 1.2 API...
针对jQuery EasyUI的1.9.0的在线帮助文档进行整理，生成chm文件，便于开发时或者离线对easyi控件的属性、文法、事件等内容的查看。
jQuery EasyUI 是一个基于 jQuery 的前端开发框架，用于快速构建用户界面。v1.10.0 是这个框架的一个特定版本，包含了一系列组件和功能，适用于网页应用的开发。在这个zip压缩包中，我们可以找到一系列文件，每个都...
jQuery EasyUI 是一个基于 jQuery 的前端框架，它提供了一系列易于使用的组件，用于快速构建用户界面。1.4.2 版本是这个框架的一个稳定版本，包含了许多改进和修复，以提升开发者的体验和应用程序的性能。这个压缩包...
**jQuery EasyUI 知识点详解** jQuery EasyUI 是一个基于 jQuery 的前端框架，它提供了一系列的组件，帮助开发者快速构建具有专业外观和交互性的 Web 应用程序。这个框架的核心理念是通过简单的 JavaScript 调用来...
在这个"ssm+jqueryeasyui案例"中，我们可以学习如何将这三者结合，构建出功能完善的Web应用。首先，我们需要在项目中引入SSM框架的相关依赖，包括Spring的核心库、SpringMVC的Servlet容器配置以及MyBatis的数据库...
jQuery EasyUI 是一个基于 jQuery 的前端框架，它简化了网页用户界面组件的开发，提供了丰富的UI控件，如数据网格、下拉树、对话框、菜单等。这个压缩包包含了1.5.1版本的离线中文API文档，是开发者进行jQuery ...
jQuery EasyUI 是一个基于 jQuery 的前端开发框架，它简化了网页界面的构建，提供了一系列易于使用的组件和插件，使得开发者能够快速构建出美观、功能丰富的用户界面。这个压缩包包含的是 jQuery EasyUI 的全套文件...