- 浏览: 156630 次
- 性别:
- 来自: 上海
文章分类
//查询方法 function query_() { var params=xxx; var url = "xxxajaxList.do"; $.post(url,params,showGrid, "json"); } //处理返回结果,并显示数据表格 function showGrid(data) { if (data.data[0].rows.length == 0) { $.messager.show({ title:'结果', msg:'没有数据!', showType:'slide' }); } var options = { rownumbers: true, fit:true }; options.columns = eval(data.columns);//把返回的数组字符串转为对象,并赋于datagrid的column属性 dataGrid.datagrid(options);//根据配置选项,生成datagrid var p = $('#datagrid').datagrid('getPager'); $(p).pagination({ pageNumber:data.data[0].pageNumber, pageSize:data.data[0].pageSize, onSelectPage:function(pageNumber, pageSize){ $(this).pagination('loading'); pagerChange(pageNumber,pageSize); $(this).pagination('loaded'); }, onChangePageSize:function(pageNumber,pageSize){ $(this).pagination('loading'); pagerChange(pageNumber,pageSize); $(this).pagination('loaded'); } }); dataGrid.datagrid("loadData", eval(data.data[0])); //载入本地json格式的数据 } function pagerChange(pageNumber,pageSize){ imonKCI.showZone(); $("#datagrid_page").val(pageNumber); $("#datagrid_rows").val(pageSize); query_(); imonKCI.hideZone(); }
<input type="hidden" name="page" id="datagrid_page" value="1"> <input type="hidden" name="rows" id="datagrid_rows" value="10"> ... <table id="datagrid" width="100%"></table>
转换后的JSON:
{"columns":[[
{"field":"taskName","title":"名称","align":"center","width":"100"},{"field":"kpScope","title":"范围","align":"center","width":"100"},
{"field":"中文","title":"中文","align":"center","width":"100"}]],
"data":[{"pageSize":10,"pageNumber":1,"total":1,"rows":[{"id":"661","taskName":"xxx","kpScope":"xx","中文":"xx"}]}]}
public class DataGridColumn { private String field; private String title; private String align="center"; private String width="100"; ... } List<DataGridColumn> columns=new ArrayList<DataGridColumn>(); columns.add(new DataGridColumn("taskName","名称")); columns.add(new DataGridColumn("kpScope","范围")); String result="{\"columns\":["+JsonUtil.bean2json(columns)+"],\"data\":[{\"pageSize\":"+rows+",\"pageNumber\":"+page+",\"total\":"+list.size()+",\"rows\":["+rowStr+"]}]}";
发表评论
-
Json-JsonUtil
2014-06-25 17:45 1024http://www.open-open.com/lib ... -
Google Gson 使用简介
2014-06-25 17:17 801http://www.cnblogs.com/haippy/ ... -
JSP-获取spring 的容器ApplicationContext
2014-06-24 15:36 484http://hw1287789687.iteye.com/ ... -
Java-读取Properties文件的六种方法
2014-06-24 10:04 763http://hi.baidu.com/hgd0324/it ... -
Quartz定时任务学习(九)Quartz监听器
2014-06-22 12:43 1907转载:http://hi.baidu.com/xulin_ ... -
Quartz定时任务学习(六)作业
2014-06-22 12:44 1389转载:http://hi.baidu.com/ ... -
Quartz定时任务学习(五)触发器
2014-06-20 17:06 1580转载:http://hi.baidu.com/xulin_ ... -
Quartz定时任务学习(四)调度器
2014-06-20 17:03 1836转载:http://hi.baidu.com/xulin_1 ... -
Quartz定时任务学习(三)属性文件和jar
2014-06-20 17:00 1745转载:http://hi.baidu.com/xulin_1 ... -
Quartz定时任务学习(二)web应用
2014-06-20 16:57 931转载: http://hi.baidu.com/xuli ... -
Quartz定时任务学习(一)简单任务
2014-06-20 16:50 902转载:http://hi.baidu.com/ ... -
com.google.common.cache.CacheLoader 本地緩存的使用方法
2014-06-19 13:58 3976http://blog.sina.com.cn/s/blog ... -
javascript-json字符串数组转json数组对象
2014-06-18 16:43 1123后台的数据为 [{"use ... -
LDAP-Java LDAP操作
2014-06-18 14:03 817Java LDAP操作http://blog.csdn.n ... -
html-8款流行前沿的HTML5文本编辑器
2014-06-13 15:19 1149http://www.evget.com/article/2 ... -
Redis-Jedis
2014-06-12 16:49 524http://snowolf.iteye.com/blog/1 ... -
Jetty-嵌入式开发
2014-06-06 12:38 558http://blog.csdn.net/cdl2008sky ... -
SSO-使用 CAS 在 Tomcat 中实现单点登录
2014-06-05 16:31 673http://www.ibm.com/developerwor ... -
SSO-https原理及tomcat配置https方法
2014-06-04 18:22 1462http://jingyan.baidu.com/articl ... -
Java-加密技术
2014-06-04 18:13 468http://snowolf.iteye.com/blog/3 ...
相关推荐
easyUI页面datagrid动态列和form字段动态添加;项目开发时用到的,废了不少事,大概总了一下,现在发出来共享给想我一样的要用到的菜鸟们,谢谢
4. **初始化表格**:使用EasyUI的`datagrid`方法初始化表格,并传入动态生成的列配置。 ```javascript $('#datagrid').datagrid({ columns: [columns], data: dataSource.data // 数据源中的数据行 }); ``` 5. *...
在这个"Jquery-easyUI动态菜单"项目中,我们将会探讨如何在标准的 Maven 项目中实现动态生成的菜单,以及其在分页和界面交互中的应用。 **1. Maven项目结构与配置** Maven是Java项目管理工具,用于构建、依赖管理和...
本文的目标是通过一个具体的案例来展示如何使用JQuery EasyUI的datagrid组件来实现多表头和根据数据库动态生成列的需求。 #### 解决方案 ##### 1. 后端逻辑准备 为了实现前端表格能够根据数据库内容动态变化,...
以下是对EasyUI DataGrid动态生成列的详细说明。 首先,我们要理解DataGrid的`columns`属性。`columns`是一个二维数组,每个元素代表一列,包含列的配置信息,如字段名(`field`)、标题(`title`)、宽度(`width`...
在描述中提到的"easyui的datagrid生成合并行,合计计算价格",指的是如何使用EasyUI的DataGrid组件来实现表格数据的行合并以及总价的计算功能。以下是对这个知识点的详细解释: 1. EasyUI DataGrid组件: EasyUI的...
**1.1 DataGrid 自动生成列与用户自定义列** EasyUI 的 DataGrid 控件支持两种方式的数据绑定:自动列生成和用户自定义列。 - **自动列生成**:当 `AutoGenerateColumns` 属性被设置为 `true` 时,DataGrid 会根据...
1. 数据绑定:通过JSON数据结构,将菜单项与`easyui-accordion`和`easyui-tree`组件关联起来,动态生成导航结构。 2. 事件处理:监听用户的点击事件,根据选择的菜单项执行相应的操作,如跳转页面、加载内容或展开/...
EasyUI TreeGrid是一款基于jQuery和EasyUI的数据展示组件,它结合了表格和树形结构的特点,使得数据在呈现时既能保持清晰的层次关系,又能进行数据的列式展示。在实际开发中,我们经常需要将普通的JSON数据转换为...
例如,如果你有一个表格,可以遍历其行和列,获取数据并存储。 3. 创建工作簿对象:使用SheetJS创建一个新的工作簿对象,这个对象将包含你要导出的所有工作表。 4. 添加工作表:为工作簿添加一个新的工作表,并将...
easyui-datagridview,其中的datagrid-detailview.js可方便地生成子网格,但是每行均默认生成展开按钮,实际我们希望对某些行不显示展开按钮,网上很多人提供的解决方案就是通过dom操作将生成的展开按钮删除掉,但是...
EasyUI 的表格组件通过 `datagrid` 定义,可以通过配置列定义(columns)和数据源(data)来展示数据。例如: ```html <table id="dg" class="easyui-datagrid" title="员工列表" style="width:700px;height:250px...
1. **分析源码**:首先,我们需要查看EasyUI Datagrid的源代码,找到与序号列生成和定位相关的部分。这部分代码可能涉及DOM操作和事件绑定。 2. **创建新功能**:然后,我们需要添加新的函数或方法,用于创建可滚动...
- **组件配置**:每个组件都有各自的属性可以配置,比如表格(Grid)的 `url` 用于指定数据源,`columns` 定义列的展示。 - **事件处理**:EasyUI 提供了丰富的事件机制,如 `onLoadSuccess`、`onClickRow`,可以...
在IT行业中,EasyUI是一个基于jQuery的前端框架,它提供了丰富的UI组件,使得开发者能够快速构建用户界面。在处理数据展示时,datagrid是EasyUI的一个重要组件,它用于展示表格形式的数据。当需要将这些数据显示在...
2. **构建表头**:遍历 `frozenColumns` 和 `columns`,为每一个可见的列生成 `<th>` 元素,并记录列的配置信息到 `nameList` 数组中。 3. **构建表格主体**:遍历获取到的所有行数据,为每一个字段生成 `<td>` 元素...
在这个"网页制作帮助文档集 - jquery-easyui-api-chm-document"中,我们主要关注jQuery ...通过深入学习jQuery EasyUI的API,掌握DHTML的动态特性,以及精通CSS2.0的样式规则,开发者将能更好地应对现代Web开发的挑战。
- `WebRoot` 是标准的Web应用目录,包含HTML、CSS、JavaScript、图片等静态资源以及Servlet和其他动态生成内容的文件。 - `.settings` 文件夹存储Eclipse项目特定的设置,如编译器选项、项目属性等。 - `.classpath`...
通过解析列定义,它可以动态生成相应的 HTML 结构。 - 行渲染:`datagrid.bodyCell` 负责行数据的显示,包括单元格的合并、编辑模式的切换等。源码中还包含了对数据格式化和模板支持的处理。 4. **自定义扩展**: ...