jQuery Easyui DataGrid应用
冻结列
$('#tbList').datagrid({ pagination: true,
frozenColumns: [[
{ field: 'BId',checkbox:'true',width:30},
{ field: 'BNo', title: '牌号', width: 100 },
{ field: 'FNo', title: '班号', width: 100 }
]],
fitColumns:false //禁止自适应宽度、可以水平滚动
});
去掉分页
$('#tbList').datagrid({pagination: true});
更改为
$('#tbList').datagrid();
或
$('#tbList').datagrid({pagination: false});
注意:同时需要设置table的高度,而且不能为auto
复选框以及单选
<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');
}
});
获取行数
$('#tbList').datagrid("getRows").length;
隐藏列
<th field="Dept" width="100" hidden="true">名称</th>
清空原有数据
方法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:载入本地数据,旧记录将被移除。
事件:
$('#tbList').datagrid({ onClickRow: function () {//代码 } });
datagrip单击行的时候,将单选按钮设置为选中:
<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的时间格式问题
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内容太长自动换行
添加属性 nowrap="false"
行和复选框的分离(2013-03-25)
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 + ",";
});
设置数据列表的样式
$(document).ready(function () {
//呈现列表数据
$('#tbList').datagrid({ pagination: true,
rowStyler: function(index,row){
if (row.ID< 10) {//那么数据的id字段小于10的,将显示为灰色字体
return 'color:#999;';//和一般的样式写法一样
}
}
});
});
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数据网格的样式. ...
随机推荐
- Hadoop发展历史简介
简介 本篇文章主要介绍了Hadoop系统的发展历史以及商业化现状, 科普文. 如果你喜欢本博客,请点此查看本博客所有文章:http://www.cnblogs.com/xuanku/p/index.h ...
- 【ZZ】常用推荐算法
http://liyonghui160com.iteye.com/blog/2082450 在推荐系统简介中,我们给出了推荐系统的一般框架.很明显,推荐方法是整个推荐系统中最核心.最关键的部分,很大程 ...
- VS2012新建项目出错:未找到与约束
VS2012中,选择新建linq to sql 类,结果出错: 未找到与约束ContractName Microsoft.VisualStudio.Text.ITextDocumentFactoryS ...
- Shlwapi.h Shlwapi.dll 动态库
Windows中有一个Shlwapi.dll文件,包含了大量的Windows字符串处理方法,这些方法,在通常的程序应用中,经常会用到,有一部分处理方法,在CRuntime中也存在,但不方便使用.有一部 ...
- ASP.NET MVC and jqGrid 学习笔记 4-排序
排序(Sorting)分为两种:客户端排序和服务端排序 客户端排序的意思是把数据从数据库里一次性全部提取出来,然后在客户端进行排序,以后每次点击标题进行排序时,就不会给服务端传递请求了.这个“一次性” ...
- Android OkHttp详解
来源 http://frodoking.github.io/2015/03/12/android-okhttp/ 编辑推荐:稀土掘金,这是一个针对技术开发者的一个应用,你可以在掘金上获取最新最优质的技 ...
- 标签切换JS代码
//标签切换 var nav = $('.index-nav'); var content = $('.index-nav-content li'); function hoverNav ($eleA ...
- POWER DESIGN
一.概念数据模型概述数据模型是现实世界中数据特征的抽象.数据模型应该满足三个方面的要求:1)能够比较真实地模拟现实世界2)容易为人所理解3)便于计算机实现 概念数据模型也称信息模型,它以实体-联系(E ...
- vim粘贴代码格式变乱
转自netingcn.com 有时候从编辑器里面复制粘贴代码到vim中,代码格式会完全乱套.其原因是vim开启了smartindent(智能缩减)或autoindent(自动对齐)模式.为了保持代码的 ...
- javaweb学习总结二十(http响应)
一:http响应 1:http响应的组成部分 状态行.响应头.空行.响应数据 2:状态行 常用状态码: 200:请求成功 302:请求路径已经转移,请访问别的地址 307或者304: 请访问缓存信息 ...