效果图：

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. 键盘--android 隐藏系统键盘

    . -----------------------------------------已验证----------------------------------- public static void ...

  2. 常见数组&字符串API及其应用场景总结

    数组API: String(arr):将arr中每个元素转化为字符串,逗号连接     场景:用于鉴别数据有没有修改等. ps:String是万能的   toString 只能转换除null和unde ...

  3. 使用WebStorm/Phpstorm实现remote host远程开发

    如果你的开发环境是在远程主机上,webstorm可以提供通过ftp/ftps/sftp等方式实现远程同步开发.这样我们可以就抛弃ftp. winscp等工具,通过webstorm编辑远程文件以及部署, ...

  4. Apache Thrift学习之二（基础及原理）

    Apache Thrift 是 Facebook 实现的一种高效的.支持多种编程语言的远程服务调用的框架.本文将从 Java 开发人员角度详细介绍 Apache Thrift 的架构.开发和部署,并且 ...

  5. Windows 64位下安装Redis详细教程

    方法/步骤 在D盘新建文件夹[redis],右键解压Redis ZIP包,把所有文件解压到redis文件夹中.(其他盘符也可以滴^_^) 文件介绍: redis-benchmark.exe       ...

  6. android之ExpandableListActivity

    MainActivity.java package com.example.mars_2300_expandablelist; import java.util.ArrayList; import j ...

  7. Python深入02 上下文管理器

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 上下文管理器(context manager)是Python2.5开始支持的一种语 ...

  8. ArcGIS上根据经纬度求地球表面两点间距离的实现

    ArcGIS上根据经纬度求地球表面两点间距离的实现 以米为单位..Net2.0,C#实现.        public static double DistanceOfTwoPoints(double ...

  9. 解决删除/升级Python导致Ubuuntu无法进入桌面的问题

    找到问题的原因后于是换个思路,想大概修复了python,Ubuntu进入桌面应该也就没啥问题了.于是重新安装Python发现还是无济于事.也通过/usr/bin/python: can't find ...

  10. Redis多机功能总结

    1.通过Redis的复制功能,用户可以创建指定服务器的任意多个复制品,每个复制品服务器和被复制的原服务器拥有相同的数据: 2.通过将读请求分散给多个从服务器处理,用户可以减少主服务器在处理读请求方面的 ...