EasyUI之DataGird动态组合列

Dojo、ExtJS、Jquery(EasyUI、jQgrid、ligerui、DWZ)、还有asp.net中的服务器控件、当然也少不了HTML 标签之table标签了。其中dojo、ExtJS、Jquery这三者应该算是并列关系吧,都是基于JavaScript的框架、只不过dojo、ExtJS的学习成本比jquery高一些罢了,学习曲线陡一些,中文文档少一些,不过功能之强大还属dojo 、extjs,dojo偏向于地图。使用各式各样的datagrid有几年了,一直都没有做过总结,姑且算是忙于工作吧。最为惭愧的是,每一种dataGrid都没有用的特别精通。在实际使用中遇到问题,除了谷歌,度娘意外就只有查看晦涩难懂的英文文档了。

  注:dojo 有人直接念拼音、有人叫豆角(谐音)。

  今天在这里简单介绍EasyUI中的DataGrid中的动态组合列,也是在项目中遇到的一个问题,就是同一个报表,不同的用户登录后只能查看自己权限范围内的报表字段。有这么两种思路:

  1. 隐藏列

鉴于现在的牛人非常多,随便一查看源码就能知晓其大意,便放弃了。

  2.  动态组合显示的列  这里用了easyui 的datagrid

先来看一下

<table id="dg"></table>
$(‘#dg‘).datagrid({
                title: ‘‘,
                loadMsg: "数据加载中,请稍候……",
                height: $(window).height() - 31,
                width: $(window).width(),
                singleSelect: true,
                selectOnCheck: true,
                url: ‘col.page‘,
                sortName: ‘sn‘,
                sortOrder: ‘desc‘,
                remoteSort: false,
                idField: ‘id‘,
                columns: [[
                    { field: ‘id‘, title: ‘主键编码‘, hidden: true },
                    { field: ‘name‘, title: ‘字段名‘, width: 100 },
                    { field: ‘alias‘, title: ‘字段别名‘, width: 100 },
                    { field: ‘sn‘, title: ‘顺序‘, width: 100, sortable: true },
                    { field: ‘insdt‘, title: ‘创建时间‘, width: 220 },
                    { field: ‘opuser‘, title: ‘操作用户‘, hidden: true, width: 100 },
                ]],
                onDblClickRow: function (rowIndex, rowData) {
                    upd();
                }
 });

$(‘#dg‘).datagrid()中所包含的部分为一个Object

Columns中所包含的部分为一个嵌套数组Object

说到这里应该都明白其中大意了吧,看实现代码

  function easyUIDataGrid(medid) {
            var $datagrid = {};
            var columns = new Array();

            $datagrid.title = "";
            $datagrid.height = $(window).height() - 31;
            $datagrid.width = $(window).width();
            $datagrid.sortName = "dt";
            $datagrid.sortOrder = "desc";
            $datagrid.idField = "id";

            var param = { "medid": medid };
            $.ajax({
                url: ‘getCol.page‘,
                type: ‘post‘,
                data: "medid=" + medid,
                dataType: "json",
                async: false,
                success: function (returnValue) {            //异步获取要动态生成的列 别名,宽度也可以
                    var arr = returnValue;
                    $.each(arr, function (i, item) {
                        columns.push({ "field": item.colname, "title": item.colalias, "width": 100, "sortable": true });
                    });
                    $datagrid.columns = new Array(columns);
                    $(‘#dg‘).datagrid($datagrid);
                    console.log(JSON.stringify($datagrid));
                }
            });

        }

转载请注明出处  http://guanhp2013.cnblogs.com/

如有疑问,欢迎留言。

作者网站http://www.xyzla.com

时间: 2024-11-07 02:59:37

EasyUI之DataGird动态组合列的相关文章

雷林鹏分享jQuery EasyUI 数据网格 - 动态改变列

数据网格(DataGrid)列可以使用 'columns' 属性简单地定义.如果您想动态地改变列,那根本没有问题.为了改变列,您可以重新调用datagrid 方法,并传递一个新的 columns 属性. 创建数据网格(DataGrid) url="data/datagrid_data.json" singleSelect="true" iconCls="icon-save"> $('#tt').datagrid({ columns:[[ {

easyui的datagird动态设置当前页数

if (ishas) { $("#tg").datagrid("options").pageNumber = 1; $('#tg').datagrid('reload', { 'pDealersNo': $("#hfDealersNo").val(), 'parentId': a }); } ishas是变量,判断这个表格是否已经初始化过了.

easyui如何动态改变列的编辑属性

动态改变列的编辑属性 var tt=$('#dg').datagrid('getColumnOption', 'yearContent'); //通过列名获得此列 tt.editor={type:'textarea'}; //设置此列的编辑属性 如果禁用编辑 则设置 tt.editor={} 新增一行时 yearContent 列可以编辑 function append(){ if (endEditing()){ $('#dg').datagrid('appendRow',{});//新增一行

EasyUI datagrid动态添加列

任务描述:根据用户选择时间段,生成列数据,如图 一.先定义好datagrid固定的数据列 <script type="text/javascript"> $(document).ready(function () { $("#td_Radio").datagrid({ striped: true, border: true, iconCls: 'icon-edit', //图标 singleSelect: true, autoRowHeight: tru

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

前面一段时间写了一篇文章: 如何用easyui+JAVA 实现动态拼凑datagrid表格 这篇文章的话,效果是可以实现,但是经过我反复试验,还是存在一些问题的. 今天这篇文章就是向大家介绍下如何避免和解决这些问题. 问题如下: 这个TEMP值其实就是上面文章提到的z1,z2,z3,z4的值,也就是说,每次进行each循环,都会查出不同的值,并返回,但是事实并不是这样的 这个TEMP返回的是EACH循环以后的最后一次的值. 记住,EACH循环本身就是一个封闭的,不会循环一次返回一个值,而是让前面

GridView动态添加列并判断绑定数据DataTable的列类型控制展示内容

此篇随笔是2013年根据项目需求开发记录的,不一定符合大众口味,只需了解开发思路,毕竟解决方案多种多样. 下面简单说说需求点吧: (1)通过下拉列表可以选择一个DataSet(数据集),一个DataSet存在可以互相关联的多个DataTable(数据表格),DataTable数据来源于数据库视图:SQL语句关联比较复杂 (2)一个DataTable(数据表格)存在多个可供选择查询显示的Column(列),支持动态组合 (3)Column(列)同时支持作为查询条件进行并运算 先看效果吧,免得待会看

动态组合lambda 表达式

//第三方审核记录实体集合—动态组合lambda 表达式 Expression<Func<ThirdAdEntity, bool>> thirdWhere = p => p.Observer.Split(',').Contains(ortableEntity.CompanyAdtId.ToString()) && p.AdStartDate <= commonProperty.SystemDateTime && p.ThirdAdId !

FineUI之动态增加列及修改列的实现

在FineUI的官方示例中有类似的实现.示例中实现了动态增加列,但有时我们可能需要动态修改列.先来看效果图 下面是代码实现 DynamicGrid.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DynamicGrid.aspx.cs" Inherits="FineUITest.DynamicGrid" %> <%@ Registe

WPF DataGrid绑定一个组合列

WPF DataGrid绑定一个组合列 前台: <Page.Resources>        <local:InfoConverter x:Key="converter"></local:InfoConverter>    </Page.Resources> <DataGridTextColumn>                        <DataGridTextColumn.Binding>