`

easyui 数据表格datagrid动态列代码

阅读更多

$('#searchForm').form("submit", {
  url : WINDOW_CONTEXT_PATH+'/data/roleList.action',
  dataType:'json',
  success : function(data) {
   var result = $.parseJSON(data);
   if (result.success) {
    var columns=new Array();
          var cls=result.rows.columns;
          for(var i=0;i<cls.length;i++){
           var column={}; 
              column["title"]=cls[i].title; 
              column["field"]=cls[i].field; 
              column["width"]=100;
              column["align"]='center';
              columns.push(column);
    };
          grid = $('#grid').datagrid({
              idField : 'roleId',
     striped : false,
     rownumbers : true,
     pagination : true,
     singleSelect : false,
     pageSize : 10,
     pageList: [10, 20],

     fitColumns: true,
     striped:true,
     toolbar:"#toolbar",
     frozenColumns : [[{
      title : '角色ID',
      field : 'roleId',
      width : 100,
      sortable:true
     }]],
              columns : [ 
                  columns 
              ], 
              rownumbers:true}).datagrid('loadData',result.rows.rows).datagrid('clearSelections'); 
   } else {
    $.messager.alert('提示', result.error.msg, 'error');
   }
  }   
 });

分享到:
评论

相关推荐

    JS EasyUI DataGrid动态加载数据

    JS EasyUI DataGrid是一款基于jQuery和EasyUI框架的数据表格组件,它提供了丰富的功能,如数据分页、排序、过滤和自定义操作等。在实际应用中,动态加载数据是DataGrid的一个重要特性,允许用户在需要时加载更多的...

    easyui datagrid标题列宽度自适应

    标题 "easyui datagrid标题列宽度自适应" 涉及到的是JavaScript库EasyUI中的一个功能特性,它主要用于Web应用程序的数据展示。EasyUI是一个基于jQuery的轻量级框架,提供了一系列易于使用的UI组件,包括datagrid,...

    EasyUI 数据表格datagrid列自适应内容宽度的实现

    总的来说,实现EasyUI数据表格列宽自适应内容宽度的过程涉及到对数据表格的遍历、对文本内容的长度计算、列宽的动态设置以及对列宽调整功能的冻结。通过这些步骤,我们可以确保数据表格的列宽能够恰当地展示内容,...

    解决EasyUIdataGrid列比较多,无数据,列展现不全

    ### 解决EasyUI dataGrid列较多时无数据显示不全的问题 在使用EasyUI框架进行前端开发的过程中,可能会遇到dataGrid组件在数据为空时列显示不完整的问题。这不仅影响用户体验,也降低了系统的可用性。本文将详细...

    EasyUI可扩展Editable DataGrid(可编辑数据表格)

    标题 "EasyUI可扩展Editable DataGrid(可编辑数据表格)" 涉及的是一个流行的JavaScript框架——EasyUI中的一个特性。EasyUI是基于jQuery的一个轻量级且易于使用的前端框架,它提供了一系列预定义的CSS样式和...

    easyui datagrid 数据导出到Excel

    在IT行业中,EasyUI Datagrid是一款基于jQuery的前端数据展示组件,它提供了丰富的表格功能,如排序、分页、过滤等。在实际工作中,我们经常需要将这些展示的数据导出到Excel文件,以便进行进一步的分析或存储。下面...

    easyui datagrid在编辑状态下更新列的值

    在使用EasyUI框架开发Web应用时,Datagrid组件是一个非常重要的元素,它提供了一种方便的方式来展示和操作数据。在标题“easyui datagrid在编辑状态下更新...通过这种方式,可以实现动态交互的数据表格,提高用户体验。

    easyui datagrid 右冻结

    EasyUI是一个基于jQuery的UI库,提供了丰富的组件,包括datagrid,它是一个用于展示表格数据的组件。在某些场景下,用户可能希望在滚动表格时,某些重要的列(通常是标题或标识列)始终保持可见,这就是“右冻结”的...

    easyui的datagrid生成合并行,合计计算价格

    在描述中提到的"easyui的datagrid生成合并行,合计计算价格",指的是如何使用EasyUI的DataGrid组件来实现表格数据的行合并以及总价的计算功能。以下是对这个知识点的详细解释: 1. EasyUI DataGrid组件: EasyUI的...

    easyui datagrid 多条件筛选 可复选 类似淘宝筛选

    首先,`datagrid`是EasyUI中的一个核心组件,它用于展示数据表格,支持分页、排序、过滤等多种操作。在实现多条件筛选时,我们需要对datagrid的`columns`属性进行配置,定义每一列的显示方式和筛选条件。例如,我们...

    easyui 可编辑datagrid完整例子,支持filebox

    同时,这个例子还集成了 filebox 功能,意味着 datagrid 的某一列可以支持文件的上传和管理,如图片、文档等,这对于需要处理多媒体数据的应用来说是十分重要的。 标签中的 "java" 表示这个例子可能与 Java 后端...

    easyui datagrid 增加鼠标悬停弹窗事件

    EasyUI的Datagrid是一个强大的表格组件,它可以显示大量数据并支持排序、分页、过滤和编辑等功能。在Web应用中,Datagrid常用于展示结构化的数据,使用户能够高效地浏览和操作信息。 2. **鼠标悬停事件**: 在...

    jquery easyui datagrid demo

    Datagrid 是 jQuery EasyUI 中一个强大的数据展示组件,常用于表格数据的展示和操作,支持分页、排序、过滤、编辑等功能。通过阅读这份文档,我们可以了解 Datagrid 的基本配置和高级特性,以及如何与后端数据源进行...

    easyUI-datagrid数据表格导出功能后台代码

    项目工具代码,中间包含了service和controller两层,model可以自己定义

    EasyUI DataGrid过滤用法实例

    在这个"EasyUI DataGrid 过滤用法实例"中,我们将深入探讨如何利用 EasyUI 的 DataGrid 组件实现数据过滤功能,帮助用户更高效地查找和管理表格中的信息。 首先,`datagrid-filter.js` 文件很可能包含了实现过滤...

    EasyUI 1.3.1动态表格列示例

    4. **初始化表格**:使用EasyUI的`datagrid`方法初始化表格,并传入动态生成的列配置。 ```javascript $('#datagrid').datagrid({ columns: [columns], data: dataSource.data // 数据源中的数据行 }); ``` 5. *...

    jQuery EasyUI编辑DataGrid用combobox实现多级联动

    本文主要探讨的是如何利用jQuery EasyUI的DataGrid和combobox组件实现多级联动的效果,这对于在数据录入时需要根据上一级选择动态更新下一级选项的情况非常有用,比如在本例中的“老师分类”和“老师细类”。...

    在jquery easyui中的datagrid中添加searchbox!

    在jQuery EasyUI中,`datagrid`是一个非常常用的组件,它用于展示数据表格,具有丰富的功能和良好的用户体验。而`searchbox`则是为了增强`datagrid`的搜索功能,让用户能够更方便地查找表格中的特定数据。在标题和...

    easyui-datagrid之间拖拽效果demo

    首先,Datagrid 是 EasyUI 提供的一种表格控件,它可以展示大量结构化的数据,并支持排序、分页、过滤等多种功能。在拖拽效果中,用户可以直观地将一行或多行数据从一个 Datagrid 拖动到另一个 Datagrid,实现数据的...

    easyui datagrid 表格 打印

    本篇文章将深入探讨如何实现EasyUI DataGrid的表格打印功能,特别是如何处理使用formatter格式化后的数据。 首先,我们需要了解`formatter`在EasyUI中的作用。`formatter`是一个用于数据格式化的函数,它可以将原始...

Global site tag (gtag.js) - Google Analytics