效果图：

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. JAVA 单选按钮、复选按钮

    //单选按钮和复选按钮 import java.awt.*; import javax.swing.*; public class Jiemian6 extends JFrame{ JPanel mb ...

  2. ruby 字符串学习2

    在一个ruby字符串中包含表但是或者变量.想使用不同的值替换表达式或者变量 1 类似java 或者python的printf-style方式 template = 'Oceania has alway ...

  3. [ActionScript 3.0] 通过三角形获得 3D 效果

    Flash Player 10 和更高版本,Adobe AIR 1.5 和更高版本 在 ActionScript 中,使用Graphics.drawTriangles()方法执行位图转换,因为 3D ...

  4. [Java] 02 String的常用方法

    public class TestString{ public static void main(String[] args){ String str1 = "123"; Stri ...

  5. python 之编码问题详解

    前在一个项目中遇到用post提交一个xml,xml中含有中文,对于单独的py文件,使用urllib2.urlopen完全ok,但在django中使用就一直报编码错误,然后在网上看到这篇文章不错,决定m ...

  6. Eclipse 常用设置

    1. eclipse中的汉字横着显示怎么解决 同一种字体有两种显示方式,比如Fixedsys Excelsior 3.01和@Fixedsys Excelsior 3.01,前一种汉字是竖着显示,后一 ...

  7. 前端之JavaScript

    JavaScript JavaScript 是一种轻量级的编程语言:是可插入 HTML 页面的编程代码:JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行. 一,编写方式 1.Ja ...

  8. Socket网络编程例子

    1.为了安全的进行通信,基于ACK确认机制----重传机制 使用selector机制的多路复用的IO通信机制,此外还有epoll控制 业务挂接点或者接入点: 常见的接入点: RDBMS进行CRUD M ...

  9. router os

    http://www.oschina.net/news/47568/router-operation-system

  10. Oracle 10g RAC中的DRM问题及关闭

    在RAC环境中,Oracle使用GRD(Global Resource Service)来记录各个RAC节点的资源信息,具体通过GCS(Global Cache Service)和GES(Global ...