jQuery easy 之dataGrid数据列表

jQuery easy 中的dataGrid插件是一款非常优秀的数据展示插件,它可以动态绑定数据列,下面开始简单介绍:

第一步:首先对其进行初始化

$("#dg").datagrid({

url:‘getSupervisionPlan.call‘,

singleSelect: true,

fitColumns: false,

pagination: true,

       //需要传递的参数(如查询条件,类型为json)

queryParams:,

pageSize: 10,

height:375,

rownumbers: true,

       //需要绑定的数据列:[{falid:‘‘,title:‘‘}]

columns: ,

frozenColumns: dataObj.FrozenColumns,

loadingMessage: ‘正在加载数据,请稍等片刻......‘,

       //双击事件

       onDblClickRow: function (rowIndex, rowData){

     $pac.window(‘Save/saveCountRankUI.htm?id=‘+rowData.rangeid, ‘评分等级定义‘,520,380);

    },

onLoadSuccess:function(datagridData){

$(".datagrid-view2 .datagrid-body").css("overflow-x", "auto");

$(".datagrid-view2 .datagrid-htable td div").css(‘text-align‘,‘center‘);

}

})

}

});

时间: 2024-11-15 08:05:21

jQuery easy 之dataGrid数据列表的相关文章

JQuery Easy Ui dataGrid 数据表格

Extend from $.fn.panel.defaults. Override defaults with $.fn.datagrid.defaults. The datagrid displays data in a tabular format and offers rich support to select, sort, group and edit data. The datagrid has been designed to reduce development time and

jQuery EasyUI的DataGrid 数据行上右键问题

如下图:我想查看单行数据(如ID为20)的右键上获取该行的值,代码: JavaScript code <script type="text/javascript"> $(function(){ $('#test').datagrid({ title:'DataGrid数据列表', iconCls:'icon-grid', fit:true, collapsible:true, closable:true, nowrap: false, animate:true, url:

Jquery easy ui datagrid動態加載列問題

1.如下图效果是当选择不同的日期范围时datagrid则会加载出对应的列数 2.首先是后台组装数据,我采用的是循环并拼接DataTable数据,如下代码 //循環添加datagrid所需的表頭數據 for (int i = 0; i < table.Columns.Count; i++) { columns.AppendFormat("{{field:'{0}',title:'{1}',align:'center',width:{2}}},", table.Columns[i].

jquery easy ui datagrid中遇到的坑爹的問題。。。

不說廢話,直接上代碼吧... //定義一個全局變量防止重複提交(百度了一下似乎很多人也遇到類似的問題) 1 var i = 0; 2 //修改 3 function Update() { 4 //獲取選中行 5 var selected = $("#dg1").datagrid('getSelected'); //判斷是否有選中行 6 if (selected != null) { 7 //顯示添加窗體 8 $('.theme-popover-mask').fadeIn(100); 9

Jquery Easy UI初步学习(二)datagrid的使用

第一篇学的是做一个管理的外框,接着就是数据datagrid绑定了,这里我用asp.net mvc3来做的,主要就是熟悉属性.方法. 打开easyui的demo 就可以看到如下一段代码: 和上篇一样class="easyui-datagrid", data-options="...",这是一样的,其他我在网上查了查,并做了整理 DataGrid 属性 参数名 类型 描述 默认值 title string Datagrid面板的标题 null iconCls strin

Jquery Easy UI初步学习(三)数据增删改

第二篇只是学了加载用datagrid加载数据,数据的增删改还没有做,今天主要是解决这个问题了. 在做增删改前需要弹出对应窗口,这就需要了解一下EasyUi的弹窗控件. 摘自:http://philoo.cnblogs.com/ 我的理解,就是panel有的属性Window.dialog都有,同时保留自己的扩展属性方法 , 所以主要展示pannel的属性. Pannel 属性 名称 类型 说明 默认值 title string 显示在Panel头部的标题文字. null iconCls strin

使用jquery中$.each()方法来循环一个数据列表

定义和用法 jQuery.each() 函数用于遍历指定的对象和数组. 语法 $.each( object, callback ) 参数 描述 object Object类型 指定需要遍历的对象或数组. callback Function类型 指定的用于循环执行的函数. 通过这个方法可以将工作中遇到的数据列表如商城里面的商品列表等很好的进行循环,简单方便,下面就是我写的一个案例: 当然这个这个数组对象是我自己模拟的,实际工作中我们只需要根据后台给的接口来进行操作. html: <div clas

jQuery Easyui datagrid 数据表格的使用

jQuery Easyui datagrid 数据表格的使用1. 在页面显示表格的位置 提供<table>标签,指定 id 元素2. 在 JS 代码 $("#grid").datagrid({-}); 完成对表格设置表格列定义远程数据加载分页 顶部工具栏 代码效果 原文地址:https://blog.51cto.com/13587708/2420696

JQuery Easy Ui (Tree树)详解

在这里沉重悼念我辛辛苦苦写了4个小时的文章,因为我的失误,没保存,而夭折啦..... 我的痛苦谁能懂? 哎~~~~  吃一见长一智吧! 么的办法啊! 但是,但是!我狠了狠心,咬了咬牙!我决定,再写一遍!!! 谁知道哭的表情怎么写! 我已经无法用言语表达我此时此刻的沉重心情了! (以下内容,身为菜鸟的我是用颤抖的双手敲出来的,忘同志们珍惜!!!!) 记得4个小时之前,我写过一个随笔,它的内容是这样的: 每次写博客,都喜欢在前面和大家分享一些东西,今天要分享的是一个小故事: 一个世界著名的大酒店正在