`
liumayulingyan
  • 浏览: 156630 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类
最新评论

EasyUI 动态生成列

 
阅读更多
        //查询方法
        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+"]}]}";

分享到:
评论

相关推荐

    easyUI页面datagrid动态列和form字段动态添加

    easyUI页面datagrid动态列和form字段动态添加;项目开发时用到的,废了不少事,大概总了一下,现在发出来共享给想我一样的要用到的菜鸟们,谢谢

    EasyUI 1.3.1动态表格列示例

    4. **初始化表格**:使用EasyUI的`datagrid`方法初始化表格,并传入动态生成的列配置。 ```javascript $('#datagrid').datagrid({ columns: [columns], data: dataSource.data // 数据源中的数据行 }); ``` 5. *...

    Jquery-easyUI动态菜单

    在这个"Jquery-easyUI动态菜单"项目中,我们将会探讨如何在标准的 Maven 项目中实现动态生成的菜单,以及其在分页和界面交互中的应用。 **1. Maven项目结构与配置** Maven是Java项目管理工具,用于构建、依赖管理和...

    datagrid 多表头及动态生成的实现

    本文的目标是通过一个具体的案例来展示如何使用JQuery EasyUI的datagrid组件来实现多表头和根据数据库动态生成列的需求。 #### 解决方案 ##### 1. 后端逻辑准备 为了实现前端表格能够根据数据库内容动态变化,...

    jQuery EasyUI中DataGird动态生成列的方法

    以下是对EasyUI DataGrid动态生成列的详细说明。 首先,我们要理解DataGrid的`columns`属性。`columns`是一个二维数组,每个元素代表一列,包含列的配置信息,如字段名(`field`)、标题(`title`)、宽度(`width`...

    easyui的datagrid生成合并行,合计计算价格

    在描述中提到的"easyui的datagrid生成合并行,合计计算价格",指的是如何使用EasyUI的DataGrid组件来实现表格数据的行合并以及总价的计算功能。以下是对这个知识点的详细解释: 1. EasyUI DataGrid组件: EasyUI的...

    easyui使用datagrid定制生成一个table

    **1.1 DataGrid 自动生成列与用户自定义列** EasyUI 的 DataGrid 控件支持两种方式的数据绑定:自动列生成和用户自定义列。 - **自动列生成**:当 `AutoGenerateColumns` 属性被设置为 `true` 时,DataGrid 会根据...

    EasyUI 多层导航框架

    1. 数据绑定:通过JSON数据结构,将菜单项与`easyui-accordion`和`easyui-tree`组件关联起来,动态生成导航结构。 2. 事件处理:监听用户的点击事件,根据选择的菜单项执行相应的操作,如跳转页面、加载内容或展开/...

    EasyUI treegrid json格式生成方法

    EasyUI TreeGrid是一款基于jQuery和EasyUI的数据展示组件,它结合了表格和树形结构的特点,使得数据在呈现时既能保持清晰的层次关系,又能进行数据的列式展示。在实际开发中,我们经常需要将普通的JSON数据转换为...

    easyui+数据导出为Excel

    例如,如果你有一个表格,可以遍历其行和列,获取数据并存储。 3. 创建工作簿对象:使用SheetJS创建一个新的工作簿对象,这个对象将包含你要导出的所有工作表。 4. 添加工作表:为工作簿添加一个新的工作表,并将...

    jquery-easyui-datagridview datagrid-detailview.js升级自定义展开按钮功能

    easyui-datagridview,其中的datagrid-detailview.js可方便地生成子网格,但是每行均默认生成展开按钮,实际我们希望对某些行不显示展开按钮,网上很多人提供的解决方案就是通过dom操作将生成的展开按钮删除掉,但是...

    easyui 表格增删改查工具类

    EasyUI 的表格组件通过 `datagrid` 定义,可以通过配置列定义(columns)和数据源(data)来展示数据。例如: ```html &lt;table id="dg" class="easyui-datagrid" title="员工列表" style="width:700px;height:250px...

    easyui datagrid支持设置非冻结的序号列

    1. **分析源码**:首先,我们需要查看EasyUI Datagrid的源代码,找到与序号列生成和定位相关的部分。这部分代码可能涉及DOM操作和事件绑定。 2. **创建新功能**:然后,我们需要添加新的函数或方法,用于创建可滚动...

    jQuery_EasyUI中文帮助手册_jqueryeasyui_easyui_

    - **组件配置**:每个组件都有各自的属性可以配置,比如表格(Grid)的 `url` 用于指定数据源,`columns` 定义列的展示。 - **事件处理**:EasyUI 提供了丰富的事件机制,如 `onLoadSuccess`、`onClickRow`,可以...

    easyui导出excel工具

    在IT行业中,EasyUI是一个基于jQuery的前端框架,它提供了丰富的UI组件,使得开发者能够快速构建用户界面。在处理数据展示时,datagrid是EasyUI的一个重要组件,它用于展示表格形式的数据。当需要将这些数据显示在...

    easyui的datagrid数据excel导出

    2. **构建表头**:遍历 `frozenColumns` 和 `columns`,为每一个可见的列生成 `&lt;th&gt;` 元素,并记录列的配置信息到 `nameList` 数组中。 3. **构建表格主体**:遍历获取到的所有行数据,为每一个字段生成 `&lt;td&gt;` 元素...

    网页制作帮助文档集 jquery-easyui-api-chm-document

    在这个"网页制作帮助文档集 - jquery-easyui-api-chm-document"中,我们主要关注jQuery ...通过深入学习jQuery EasyUI的API,掌握DHTML的动态特性,以及精通CSS2.0的样式规则,开发者将能更好地应对现代Web开发的挑战。

    MVC结合Easyui Portal 实例

    - `WebRoot` 是标准的Web应用目录,包含HTML、CSS、JavaScript、图片等静态资源以及Servlet和其他动态生成内容的文件。 - `.settings` 文件夹存储Eclipse项目特定的设置,如编译器选项、项目属性等。 - `.classpath`...

    easyui学习笔记(九)源码

    通过解析列定义,它可以动态生成相应的 HTML 结构。 - 行渲染:`datagrid.bodyCell` 负责行数据的显示,包括单元格的合并、编辑模式的切换等。源码中还包含了对数据格式化和模板支持的处理。 4. **自定义扩展**: ...

Global site tag (gtag.js) - Google Analytics