效果图：

1：简单初始化

JSON格式数据如下（后台自己构建，后台代码略）：

{"total":6,"columns":[{"field":"building_id","title":"公寓编号","align":"center","width":100},{"field":"building_name","title":"公寓名称","align":"center","width":100},{"field":"building_info","title":"公寓信息","align":"center","width":100},{"field":"school_area","title":"所在校区","align":"center","width":100}],"rows":[{"building_id":"B1","building_name":"1号楼","building_info":"一公寓（女生）","school_area":"小营"},{"building_id":"B2","building_name":"2号楼","building_info":"二公寓（女生）","school_area":"小营"},{"building_id":"B3","building_name":"3号楼","building_info":"三公寓（女生）","school_area":"小营"},{"building_id":"B4-1","building_name":"4-1号楼","building_info":"四公寓（男生）","school_area":"小营"},{"building_id":"B4-2","building_name":"4-2号楼","building_info":"四公寓（女生）","school_area":"小营"},{"building_id":"B5","building_name":"5号楼","building_info":"五公寓（男生）","school_area":"小营"}]}

前台代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="Scripts/jquery-2.1.4.min.js"></script>
    <script src="Scripts/jquery.easyui-1.4.3.min.js"></script>
    <link href="Content/themes/icon.css" rel="stylesheet" />
    <link href="Content/themes/default/easyui.css" rel="stylesheet" />
    <script>
        $(function () {
            // Handlers/FreeBeHandler.ashx  各自的后台JSON数据处理地址
            $.getJSON('Handlers/FreeBeHandler.ashx', function (result) {
                $('#grd').datagrid({
                    title: ' XXX公司价差补差分配表',
                    height: 500,
                    singleSelect: true,
                    url: '',
                    columns: [
                        result.columns
                    ],
                    rownumbers: true
                }).datagrid('loadData', result.rows);
            });
        })
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <div>
            <table id="grd" title="Client Side Pagination" style="width: 700px; height: 300px">
            </table>
        </div>
    </form>
</body>
</html>

2:datagrid复杂显示，添加linkbutton多标签页的处理方式

效果图：

JSON数据格式不变

客户端javascript代码如下：

<script>
        var grid;
        $(function () {

grid = $('#tt').datagrid({
                fit: true,//自动大小 
                rownumbers: true,//行号
                //loadMsg:'数据装载中......', 
                singleSelect: true,//单行选取
                pagination: false,//显示分页
                columns: [[]],
                toolbar: [{
                    text: '显示1',
                    iconCls: 'icon-add',
                    handler: newData
                }, '-', {
                    text: '显示2',
                    iconCls: 'icon-add',
                    handler: newData2
                }]
            });

});

function newData() {

$.post('Handlers/show1.ashx', { id: 1 },
                function (data) {
                    grid.datagrid({
                        columns: [data.columns]
                    }).datagrid("loadData", data);
                }, 'json');
        }

function newData2() {

$.post('Handlers/show2.ashx', { id: 2 },
                function (data) {
                    grid.datagrid({
                        columns: [data.columns]
                    }).datagrid("loadData", data);
                }, 'json');
        }

</script>

easyui+ashx 动态初始化datagrid（动态列头）的更多相关文章

  1. WPF 用 DataTemplate 合并DataGrid列表列头<类似报表设计>及行头列头样式 - 学习

    WPF中 DataGrid 列头合并,类似于报表设计.效果图如下↓ 1.新建一个WPF项目WpfApplication1,新建一个窗体DataGridTest,前台代码如下: <Window x ...

  2. datagrid拖动列头更换排列顺序

    在做这个功能的时候在网上找了大量资料,发现都不适用,要不然就是代码太冗余,所以另起炉灶,自己封装了这个函数 下面是完整的代码: <!DOCTYPE html> <html> & ...

  3. 实现在easyui中的datagrid，点击某一列的列头弹出combobox下拉框

    easyUI  datagrid在列头加下拉框,实现对列内容的筛选. 代码: onLoadSuccess: function (data) {//Fires when data is loaded s ...

  4. Easyui datagrid 数据表格 表格列头右键菜单选择展示列 JS

    Easyui ,数据表格加载出来以后,在表格头右键,会有显示筛选的功能: 如图: 然后可以取消勾选,就变成下面这个样子: 功能的实现是通过重写了easyui 的 $.fn.datagrid.defau ...

  5. Extjs 动态修改gridPanel列头信息以及store数据的方法

    1 /*******************************checkbox按钮 历史报警信息**************************************/ var check ...

  6. easyui datagrid动态设置行、列、单元格不允许编辑

    Easyui datagrid 行编辑.列编辑.单元格编辑设置 功能: 动态对datagrid 进行行.列.单元格编辑进行设置不允许编辑. 禁用行编辑: 在编辑方法调用前,对选择的行进行判断,如果不允 ...

  7. easyui动态生成双列头

    实习时老大交给任务,让我做这样一个效果,选择日期并点击查询时,动态生成列头,下一列要求对应日期的星期. 效果图: 下面贴出查询的单击函数: //查询按钮 function queryByDate(){ ...

  8. 如何用easyui+JAVA 实现动态拼凑datagrid表格(续)

    前面一段时间写了一篇文章: 如何用easyui+JAVA 实现动态拼凑datagrid表格 这篇文章的话,效果是可以实现,但是经过我反复试验,还是存在一些问题的. 今天这篇文章就是向大家介绍下如何避免 ...

  9. datatable的部分问题处理(动态定义列头，给某行添加事件，初始显示空数据)

    一.动态定义列头 在ajax中,用datatable再去重新配置列头,当然传回的数据中,要有对应放列头的键值对 我自定义了Mock数据,用于前端自己交互. 其中,rowdata用于存放传回的数据,co ...

随机推荐

  1. Yii 框架中带有区间的搜索

  2. 证据对抗、证据链标准 z

    证据链乃诉讼中应对证据冲突的法宝   大部分当事人知道“证据链”这一诉讼专用术语,但几乎所有当事人将“证据链”理解成了人证.书证.物证,鉴定结论等证据的组合,将“证据链”视为不同种类证据依次出击的“组 ...

  3. rails中两种回滚－reversible和revert区别

    1 通常迁移内容写在change方法中 ,但是有些迁移内容不能自动通过执行rake:rollback回滚, 所以在迁移文件里要使用 reversible 方法,告诉rails如何回滚例如下面 # co ...

  4. NPM使用

    安装路径修改: 4.配置npm的全局模块存放路径和cache路径 输入以下命令 npm config set prefix  “D:\Program Files\node\node-global” n ...

  5. MYSQL C API : mysql_init()

    MYSQL * mysql_init(MYSQL *mysql); // 初始化一个MYSQL 连接的实例对象 void mysql_close(MYSQL *sock); // 释放一个MYSQL ...

  6. Play framework(二)

    Play 2.0 的完整演示过程记录 http://www.oschina.net/translate/playframework-20-live-coding-script todolist代码

  7. 配置Tomcat数据源

    1.方式一:在server.xml中配置 1)tomcat安装路径下conf目录下的server.xml,在<GlobalNamingResources>和</GlobalNamin ...

  8. 如何下载spring-framework

    http://jingyan.baidu.com/album/a65957f49670ac24e67f9b85.html?picindex=1

  9. 记事本源代码 python3

    已实现基本功能,显示行号功能暂时实现不了(后面学会了再加,右下角可以实现定位光标所在行.列) 可能会有些bug 1 from tkinter import * from tkinter.message ...

  10. 慧自文档：代替 Everything 来快速查找文件的，实现文件显示在文件夹的层次结构中

    1. 搜索功能和Everything一样快和强大 具有 Everything 搜索快.搜索功能强等优点, 解决了不能方便选择搜索哪个文件夹, 解决了不能同一个画面进行预览等问题 2.文件直接显示到文件 ...