jquery easyui DataGrid
Easyui Demo网站:
http://www.jeasyui.com/ 英文
http://www.phptogether.com/juidoc/ 中文
datagrip的基本属性方法:http://www.phptogether.com/juidoc/datagrid.html
推荐:http://www.cnblogs.com/Philoo/tag/jQuery/
冻结列 (2013-01-17 )
- $('#tbList').datagrid({ pagination: true,
- frozenColumns: [[
- { field: 'BId',checkbox:'true',width:30},
- { field: 'BNo', title: '牌号', width: 100 },
- { field: 'FNo', title: '班号', width: 100 }
- ]],
- fitColumns:false //禁止自适应宽度、可以水平滚动
- });
去掉分页(2013-02-20)
$('#tbList').datagrid({pagination: true});
更改为
$('#tbList').datagrid();
或
$('#tbList').datagrid({pagination: false});
注意:同时需要设置table的高度,而且不能为auto
复选框以及单选(2013-02-20)
- <table id="tbList" style="height: 330px;" striped="true" rownumbers="true" fitColumns="true" title="" iconcls="icon-edit"
checkbox="true" idfield="Id" url="@Url.Action("ListData")">- <thead>
- <tr>
- <th field="Id" checkbox="true" width="150">
- </th>
</tr>- </thead>
- </table>
变为单选(添加singleSelect="true" )
<table id="tbList" style="height: 330px;" striped="true" rownumbers="true" fitColumns="true" title="" iconcls="icon-edit" singleSelect="true" checkbox="true" idfield="Id" url="@Url.Action("ListData")">
加载数据后默认全选:
- $(document).ready(function () {
- $('#tbList').datagrid({
- onLoadSuccess: function (data) {
- $('#tbList').datagrid('selectAll');
- }
- });
获取行数(2013-02-20)
$('#tbList').datagrid("getRows").length;
隐藏列(2013-02-20)
<th field="Dept" width="100" hidden="true">名称</th>
清空原有数据(2013-02-20)
方法1:
var item = $('#filegrid').datagrid('getRows');
if (item) {
for (var i = item.length - 1; i >= 0; i--) {
var index = $('#filegrid').datagrid('getRowIndex', item[i]);
$('#filegrid').datagrid('deleteRow', index);
}
}
方法2:(测试过)
$('#filegrid').datagrid('loadData', { total: 0, rows: [] });
解析:loadData:载入本地数据,旧记录将被移除。
事件(2013-02-20):
$('#tbList').datagrid({ onClickRow: function () {//代码 } });
datagrip单击行的时候,将单选按钮设置为选中(2013-02-20):
- <script type="text/javascript">
- var List = {};
- List.RadioFormatter = function (value, rec, index) {
- return "<input id='radio_id' name='radio_name' type='radio' value='" + rec.Id + "'/>";
- };
- $(document).ready( function(){ //呈现列表数据
- $('#tbList').datagrid({ onClickRow:
- function () {
- //单击行的时候,将单选按钮设置为选中
- var id = $('#tbList').datagrid("getSelected");
- $("input[name='name']").each(function () {
- if ($(this).val() == id.Id) {
- $(this).attr("checked", true);
- }
- });
- }
- });
- });
- </script>
- <table id="tbList" style="height: 300px;" striped="true" rownumbers="true" fitColumns="true" title="" iconcls="icon-edit"
- singleSelect="true" checkbox="true" idfield="Id" url="@Url.Action("ListData")">
- <thead>
- <tr>
- <th field="Id" width="30" formatter="PickupList.RadioFormatter">
- </th>
- </tr>
- </thead>
- </table>
table中td的时间格式问题(2013-03-14)
1.页面
<th field="Test" formatter="Common.TimeFormatter" width="50" ></th>
2.js
- var Common = {
- //EasyUI用DataGrid用日期格式化
- TimeFormatter: function (value, rec, index) {
- if (value == undefined) {
- return "";
- }
- /*json格式时间转js时间格式*/
- value = value.substr(1, value.length - 2);
- var obj = eval('(' + "{Date: new " + value + "}" + ')');
- var dateValue = obj["Date"];
- if (dateValue.getFullYear() < 1900) {
- return "";
- }
- var val = dateValue.format("yyyy-mm-dd HH:MM");//控制格式
- return val.substr(11, 5);
- }
- };
table中td内容太长自动换行(2013-03-18)
添加属性 nowrap="false"
行和复选框的分离(2013-03-25)
方法一:(1.3版本才能用)
checkOnSelect="false" selectOnCheck="false"
注意:当使用$("#tbList").datagrid("getSelections");时候,只有行被选中,才能取到该行。一般情况,选中行时候,行为黄色背景。
eg.<table checkOnSelect="false"> </table>
- var selected = $("#tbList").datagrid("getSelections");
- if (selected.length == 0) {
- alert("请选择!");
- return;
- }
- var idString = "";
- $.each(selected, function (index, item) {
- idString += item.Id + ",";
- });
方法二(1.3版本之前的解决方法)
- var IsCheckFlag = true;
- $('#tbList').datagrid({
- pagination: true,
- onClickCell: function (rowIndex, field, value) {
- IsCheckFlag = false;
- },
- onSelect: function (rowIndex, rowData) {
- if (!IsCheckFlag) {
- IsCheckFlag = true;
- $("#tbList").datagrid("unselectRow", rowIndex);
- }
- },
- onUnselect: function (rowIndex, rowData) {
- if (!IsCheckFlag) {
- IsCheckFlag = true;
- $("#tbList").datagrid("selectRow", rowIndex);
- }
- }
- });
设置数据列表的样式
- $(document).ready(function () {
- //呈现列表数据
- $('#tbList').datagrid({ pagination: true,
- rowStyler: function(index,row){
- if (row.ID< 10) {//那么数据的id字段小于10的,将显示为灰色字体
- return 'color:#999;';//和一般的样式写法一样
- }
- }
- });
- });
条件查询
复选框的bug:使用参数查询时候,在查询之前选中的选项 ,在查询之后,使用getSelections方法去获取,依旧存在该选项
解决方案:通过unselectAll在查询之前清空复选框即可
- $("#btnSearch").click(function () {
- $('#tbList').datagrid("unselectAll");
- $('#tbList').datagrid({ queryParams: { SearchName: $("#SearchName").val() } });
- });
jquery easyui DataGrid的更多相关文章
- jQuery EasyUI datagrid实现本地分页的方法
http://www.codeweblog.com/jquery-easyui-datagrid%e5%ae%9e%e7%8e%b0%e6%9c%ac%e5%9c%b0%e5%88%86%e9%a1% ...
- jQuery EasyUI DataGrid Checkbox 数据设定与取值
纯粹做个记录,以免日后忘记该怎么设定. 这一篇将会说明两种使用 jQuery EasyUI DataGrid 的 Checkbox 设定方式,以及在既有数据下将 checked 为 true 的该笔数 ...
- jquery easyui datagrid使用参考
jquery easyui datagrid使用参考 创建datagrid 在页面上添加一个div或table标签,然后用jquery获取这个标签,并初始化一个datagrid.代码如下: 页面上 ...
- Jquery easyui datagrid 导出Excel
From:http://www.cnblogs.com/weiqt/articles/4022399.html datagrid的扩展方法,用于将当前的数据生成excel需要的内容. 1 <sc ...
- jquery easyui datagrid 获取Checked选择行(勾选行)数据
原文:jquery easyui datagrid 获取Checked选择行(勾选行)数据 getSelected:取得第一个选中行数据,如果没有选中行,则返回 null,否则返回记录. getSel ...
- 扩展jquery easyui datagrid编辑单元格
扩展jquery easyui datagrid编辑单元格 1.随便聊聊 这段时间由于工作上的业务需求,对jquery easyui比较感兴趣,根据比较浅薄的js知识,对jquery easyui中的 ...
- jquery easyui datagrid 加每页合计和总合计
jquery easyui datagrid 加每页合计和总合计 一:效果图 二:代码实现 这个只有从后台来处理 后台根据rows 和page两个参数返回的datatable 命名为dt 然后根据dt ...
- jQuery EasyUI datagrid列名包含特殊字符会导致表格错位
首先申明:本文所述的Bug存在于1.3.3以及更高版本中,其它低版本,本人未测试,太老的版本不想去折腾了. 洒家在写前端的SQL执行工具时,表格用了 jQuery EasyUI datagrid,因为 ...
- jquery easyui datagrid 无滚动条,datagrid 没垂直滚动条
jquery easyui datagrid 无滚动条,datagrid 没垂直滚动条 ============================== 蕃薯耀 2018年2月6日 http://www. ...
- 浅谈jQuery easyui datagrid操作单元格样式
今天项目上遇到问题,就是表格风格统一的问题,由于用了2个不同的框架,所以如果要大修比较麻烦,考虑到修改表格样式工作量会少很多,所以考虑修改jQuery easyui datagrid数据网格的样式. ...
随机推荐
- 知道创宇研发技能表v2.2
知道创宇研发技能表v2.2 2014/3/9 发布 by @知道创宇(www.knownsec.com) @余弦 & 行之 知道创宇是国内Geek十足且普遍被认为特别有前途的互联网安全公司, ...
- Ubuntu 14.10 下安装Synergy,不同电脑之间公用一套键盘鼠标
因为工作时候有多台电脑放在一起,如果每个用一套键盘鼠标很是不方便,所以希望能够不用电脑之间公用一套键盘鼠标. Synergy可以实现不同电脑之间公用一套键盘鼠标,并且支持简单的复制粘贴.很好用. 它还 ...
- android中string.xml引起的常见编译错误
1.遇到如下错误的时候说明你需要在单引号签名加转义字符(\): 1 Description Resource Path Location Type error: Apostrophe not prec ...
- bootstrap菜单完美解决---原创
由于bootstrap的各方优点,偶的“点金项目细化分包管理平台”决定采用它.但在使用中遇到了一些问题,比如菜单的问题,这个菜单是用的一个JQuery的一个效果,点击后,所点击的链接处的class要加 ...
- BZOJ3028 食物 (生成函数)
首先 1+x+x^2+x^3+...+x^∞=1/(1-x) 对于题目中的几种食物写出生成函数 (对于a*x^b , a表示方案数 x表示食物,b表示该种食物的个数) f(1)=1+x^2+x^4+. ...
- Smart210学习记录-------linux内核模块
Linux 驱动工程师需要牢固地掌握 Linux 内核的编译方法以为嵌入式系统构建可运行的Linux 操作系统映像.在编译 LDD6410 的内核时,需要配置内核,可以使用下面命令中的 一个: #ma ...
- C#山寨版本【天翼拨号客户端】---内含详细抓包,模拟数据---万事俱备,只欠东风。
官方的客户端的最大缺点: 1.一台电脑不允许使用同时启动多个网卡(目的是禁止使用虚拟WIFI或通过网卡后共享网络到路由器?): 2.使用路由器无法拨号(提示:不允许NAT后登录) 3.之前用某哥们破解 ...
- PostgreSQL高可用性、负载均衡、复制与集群方案介绍
目录[-] 一.高可用性.负载均衡.复制的几个方案比较: 二.多节点集群方案比较 9.3官方文档(中文):http://58.58.27.50:8079/doc/html/9.3.1_zh/high- ...
- 【题解】【数组】【Prefix Sums】【Codility】Genomic Range Query
A non-empty zero-indexed string S is given. String S consists of N characters from the set of upper- ...
- Think Python - Chapter 11 - Dictionaries
Dictionaries A dictionary is like a list, but more general. In a list, the indices have to be intege ...