效果图：

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. cotex_m3内核提供的ITM串口打印调试

    cotex_m3内核的ARM提供了ITM串口打印观测的功能,可以不用ARM单片机自己的串口就可在开发时候串口打印调试.节约了宝贵的内部资源,同时也为调试提供了方便.使用方法如下: 1 将下面的SWO_ ...

  2. 用友UAP

    1, 用友UAP 用友集团UAP中心成立于2013年1月1日,隶属于用友集团,旨在为全球大中型企业和公共组织提供计算平台,并打造完整.统一的软件产业链生态系统,以先进的平台.技术和专业的服务成为客户信 ...

  3. Linux下SVN服务器安装配置及客户端安装说明

    原文地址:http://wenku.baidu.com/link?url=h3dVAMx4azpOXEND5HQEE6nliE8-zc0GSQ03yv4cUs1vXMALXF64UsK7kT7kXm_ ...

  4. SSH学习笔记目录

    1.Spring_2000_Spring_Hibernate_HibernateTemplate

  5. C#异步编程 z

    http://www.cnblogs.com/fangyz/p/5134018.html 从.NET4.5开始,用async和await关键字再加上Task.Run是一个非常不错的异步编程模型. 1. ...

  6. 跨域请求 & jsonp

    0 什么是跨域请求 在一个域名下请求另外一个域名下的资源,就是跨域请求.example 1:比如:我当前的域名是http://che.pingan.com.我现在要去请求http://www.cnbl ...

  7. C++学习46 getline()函数读入一行字符 一些与输入有关的istream类成员函数

    getline函数的作用是从输入流中读取一行字符,其用法与带3个参数的get函数类似.即    cin.getline(字符数组(或字符指针), 字符个数n, 终止标志字符) [例13.7] 用get ...

  8. [Java] 将标准字符流写入到文件中（通过控制台写一个html程序，并保存）

    package test.stream; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.Fi ...

  9. JAVA中的定时调度(Timer和TimerTask)

    某些时候我们需要定时去完成一些任务,这里举一个例子:我们需要在3秒钟后打印当前系统时间,此后每隔5秒重复此操作.代码如下: import java.util.TimerTask; import jav ...

  10. js 倒计时(转)

    第一个(毫秒级): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...