Easyui使用心得(1)--DateGrid表格
最近一直在用easyui这个控件,有一点心得,在这里和大家分享一下,也是对自己工作的一个小小的总结,希望可以形成一个完整的Easyui的笔记体系,可以方便更多的人
因为自己也是在摸索中前进,难免有遗漏和不准确的地方,我会再发现问题和掌握新知识之后,随时更新这篇博文,今天说的是easyui的有个常用控件-DateGrid
首先放上easyUI中国官网上的链接:http://www.jeasyui.net/demo/331.html,在这里有一些基本的示例和相对比较全面的讲解
在这篇博文里我会记录一些在工作项目中使用到的,我觉得比较有用的一些小技巧,随着工作和理解的深入,我会随时更新这篇博文
1 获取表格的选中值:
数据网格(datagrid)组件包含两种方法来检索选中行数据:
- getSelected:取得第一个选中行数据,如果没有选中行,则返回 null,否则返回记录。
- getSelections:取得所有选中行数据,返回元素记录的数组数据。
下面放一个简单的代码示例,来自官网,我手动添加了两行数据用于验证,代码如下,保存到记事本更改格式为html即可验证:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="jquery,ui,easy,easyui,web">
<meta name="description" content="easyui help you build your web page easily!">
<title>jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script>
<script>
function getSelected(){
var row = $('#tt').datagrid('getSelected');
if (row){
alert('Item ID:'+row.itemid+"\nPrice:"+row.listprice);
}
}
function getSelections(){
var ids = [];
var rows = $('#tt').datagrid('getSelections');
for(var i=0; i<rows.length; i++){
ids.push(rows[i].itemid);
}
alert(ids.join('\n'));
}
</script>
</head>
<body>
<h1>DataGrid</h1>
<div style="margin-bottom:20px">
<a href="#" onclick="getSelected()">GetSelected</a>
<a href="#" onclick="getSelections()">GetSelections</a>
</div>
<table id="tt" class="easyui-datagrid" style="width:600px;height:250px"
url="data/datagrid_data.json"
title="Load Data" iconCls="icon-save" fitColumns="true">
<thead>
<tr>
<th field="itemid" width="80">Item ID</th>
<th field="productid" width="80">Product ID</th>
<th field="listprice" width="80" align="right">List Price</th>
<th field="unitcost" width="80" align="right">Unit Cost</th>
</tr>
</thead>
<tr>
<td>001</td><td>刘明洲</td><td>80</td><td>鹏力</td>
</tr>
<tr>
<td>002</td><td>杨忠林</td><td>70</td><td>鹏力</td>
</tr>
</table>
</body>
</html>
2 隐藏表格的某一列并可取值:
这是我今天遇到的问题,出于某种原因我需要隐藏表格中的某一列,但是我需要获取到他的值,这时候在data-options里添加idField:'xxx',属性,其中xxx表示需要隐藏的列名,注释掉表格中的列,这时候可以获取到这一列的数值且在表格中不会显示
Easyui使用心得(1)--DateGrid表格的更多相关文章
- EasyUI:获取某个dategrid的所有行数据
EasyUI:获取某个dategrid的所有行数据 var rows = $("#grid").datagrid("getRows"); for(var i=0 ...
- easyui—element-ui框架套用(表格宽度自适应)
外层使用easyui框架中window组件,便于使用最大化功能:内部表格使用element-ui在的el-table,el-table列宽须设置为最小宽度才能在最大化窗口时列表中列宽自适应window ...
- JQuery EasyUI DataGrid根据条件设置表格行样式(背景色)
1.javascript定义函数返回样式 <script type="text/javascript"> //根据条件设置表格行背景颜色 function setRow ...
- EasyUI 使用心得
最近项目中用到EasyUI,总结了一下 注:EasyUI中所有的控件不能重名,否则会出现意向不到的后果.这是EasyUI框架决定的. ① EasyUI 获取文本框中的值 //日期 $('#beginD ...
- EasyUI学习心得
因为要修改十几年前的一个项目界面,打9月份开始学习EasyUI,很多事情都要自己试过才知道,小问题会浪费很多时间.所以,就在此记录一下,随时更新. 一.引号 EasyUI的自定义关键字的识别,API文 ...
- easyui使用心得
一.搭建easyui运行环境 1.下载easyui压缩文件 2.将降压后的文件添加至webapp目录下 3.引用5个必须的js和css文件 <!--引入easyui样式文件--> < ...
- 【开源】OSharp框架解说系列(2.2):EasyUI复杂布局及数据操作
OSharp是什么? OSharp是个快速开发框架,但不是一个大而全的包罗万象的框架,严格的说,OSharp中什么都没有实现.与其他大而全的框架最大的不同点,就是OSharp只做抽象封装,不做实现.依 ...
- 关于EasyUI 1.5版Datagrid组件在空数据时无法显示"空记录"提示的BUG解决方法
问题:jQuery easyUI中Datagrid,在表格数据加载无数据的时候,如何显示"无记录"的提示语? 解决jQuery EasyUI 1.5.1版本的Datagrid,在处 ...
- easyUI中datagrid的使用
easyUI中的datagrid数据表格经常被用到,结合项目中的使用情况,总结一下datagrid使用中需要注意的一些问题.使用datagrid展示数据,需要在html.css.js中都要编写代码,h ...
随机推荐
- 调查显示数据分析已取代Web开发成为第一用例
一项关于Python的开发者调查显示,编程语言现在主要用于数据分析,取代了之前的第一个用例Web开发. 去年秋天,由Python软件基金会和开发人员工具供应商JetBrains进行,2018 Pyth ...
- vue style 的scoped 使用
1 原理 vue 可以通过在 style标签添加scoped这个属性来控制 组件内的css作用域 <style scoped> @media (min-width: 250px) { .l ...
- 面试必问之JVM篇
前言 只有光头才能变强 JVM在准备面试的时候就有看了,一直没时间写笔记.现在到了一家公司实习,闲的时候就写写,刷刷JVM博客,刷刷电子书. 学习JVM的目的也很简单: 能够知道JVM是什么,为我们干 ...
- Tomcat启动报错:[Failed to start component]的解决方案
在MyEclipse中启动Tomcat,该Tomcat仅部署了一个报错项目,启动Tomcat Server的全部信息如下: usage: java org.apache.catalina.startu ...
- curl命令基本使用小总结
curl 下载文件 -o:将文件保存为命令行中指定的文件名的文件中 -O:使用URL中默认的文件名保存文件到本地 --limit-rate:限速 -C:对大文件使用断点续传功能 --silent:不显 ...
- curl 异步捉取数据类
<?php class RequestLib { /** * GET 请求 * @param string $url */ public static function http_get($ur ...
- Golang中map的三种声明方式和简单实现增删改查
package main import ( "fmt" ) func main() { test3 := map[string]string{ "one": & ...
- Centos部署flask项目
必备: Python2.7(ok) MySQL(ok) git supervisor virtualenv Gunicorn 阿里云服务器(最便宜的就好) 域名(国内万网,国外goDaddy) 我的P ...
- P3924 康娜的线段树(期望)
P3924 康娜的线段树 看起来$O(nlogn)$可过其实由于巨大常数是无法通过的 $O(nlogn)$:70pts 我们手玩样例发现 线段树上某个节点的期望值$f[o]=(f[lc]+f[rc]) ...
- 标签无效 "/zabbix_export/date": "YYYY-MM-DDThh:mm:ssZ" 预计。
Centos7.5 使用导入percona模板的时候报错 百度给的解决方案是 将zabbix_agent_template_percona_mysql_server_ht_2.0.9-sver1.1. ...