最近一直在用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表格的更多相关文章

  1. EasyUI：获取某个dategrid的所有行数据

    EasyUI:获取某个dategrid的所有行数据 var rows = $("#grid").datagrid("getRows"); for(var i=0 ...

  2. easyui—element-ui框架套用（表格宽度自适应）

    外层使用easyui框架中window组件,便于使用最大化功能:内部表格使用element-ui在的el-table,el-table列宽须设置为最小宽度才能在最大化窗口时列表中列宽自适应window ...

  3. JQuery EasyUI DataGrid根据条件设置表格行样式(背景色)

    1.javascript定义函数返回样式 <script type="text/javascript"> //根据条件设置表格行背景颜色 function setRow ...

  4. EasyUI 使用心得

    最近项目中用到EasyUI,总结了一下 注:EasyUI中所有的控件不能重名,否则会出现意向不到的后果.这是EasyUI框架决定的. ① EasyUI 获取文本框中的值 //日期 $('#beginD ...

  5. EasyUI学习心得

    因为要修改十几年前的一个项目界面,打9月份开始学习EasyUI,很多事情都要自己试过才知道,小问题会浪费很多时间.所以,就在此记录一下,随时更新. 一.引号 EasyUI的自定义关键字的识别,API文 ...

  6. easyui使用心得

    一.搭建easyui运行环境 1.下载easyui压缩文件 2.将降压后的文件添加至webapp目录下 3.引用5个必须的js和css文件  <!--引入easyui样式文件--> < ...

  7. 【开源】OSharp框架解说系列（2.2）：EasyUI复杂布局及数据操作

    OSharp是什么? OSharp是个快速开发框架,但不是一个大而全的包罗万象的框架,严格的说,OSharp中什么都没有实现.与其他大而全的框架最大的不同点,就是OSharp只做抽象封装,不做实现.依 ...

  8. 关于EasyUI 1.5版Datagrid组件在空数据时无法显示"空记录"提示的BUG解决方法

    问题:jQuery easyUI中Datagrid,在表格数据加载无数据的时候,如何显示"无记录"的提示语? 解决jQuery EasyUI 1.5.1版本的Datagrid,在处 ...

  9. easyUI中datagrid的使用

    easyUI中的datagrid数据表格经常被用到,结合项目中的使用情况,总结一下datagrid使用中需要注意的一些问题.使用datagrid展示数据,需要在html.css.js中都要编写代码,h ...

随机推荐

  1. MVC 部署HTTPS网站

    一.项目配置 什么是全站HTTPS 全站HTTPS就是指整个网站的所有页面,所有资源全部使用HTTPS链接.当用户的某个请求是明文的HTTP时,应该通过HTTP状态码301永久重定向到对应的HTTPS ...

  2. Step7：SQL Server 多实例下的复制

    一.本文所涉及的内容(Contents) 本文所涉及的内容(Contents) 背景(Contexts) 搭建步骤(Procedure) 注意事项(Attention) 二.背景(Contexts) ...

  3. 记账本微信小程序开发二

    新建一个微信小程序项目 熟悉软件各种操作.

  4. Redis慢查询日志学习功能

    慢查询日志 什么是SLOW LOG? Slow log是Redis用来记录查询执行时间超过给定时长的命令请求的日志系统.查询执行时间指的是不包括像客户端响应(talking).发送回复等IO操作,而单 ...

  5. 在Linux 中如何从进程相关的文件描述中恢复数据

    在Linux中误删除了某个文件,但是 ps-ef|grep 文件名 发现某个进程还在使用该文件,那么可以通 过以下方式恢复文件. 例如:创建一个简单文件/tmp/test.txt, 随便向里面写点内容 ...

  6. EDK II之USB设备驱动程序的加载与运行

    本文简单介绍一下USB设备的驱动程序是如何匹配设备以及被加载的: 上文(UDK中USB总线驱动的实现框架)提到USB总线枚举设备的最后一步是调用gBS->ConnectController()去 ...

  7. oracle查询所有初始化参数（含隐含参数）

    年龄大了,感觉记性不是很好了,还是重新做笔记了.最近在整理些稿子,顺便在记录下oracle查询所有初始化参数(含隐含参数): SELECT i.ksppinm name, i.ksppdesc des ...

  8. [c/c++] programming之路（9）、运算优先级

    一.运算优先级 二.条件运算符(表达式1?表达式2:表达式3) 当式1正确时,取式2的值:否则,取式3的值 三.格式字符 #include<stdio.h> #include<std ...

  9. 2018-2019-2 《网络对抗技术》Exp2 后门原理与应用 20165211

    目录 后门原理与应用 实验内容 基础问题回答 常用后门工具 Netcat Socat MSFmeterpreter 实践过程记录 1.后门工具熟悉 2.使用netcat获取主机操作Shell,cron ...

  10. 主动攻击：利用ms08_067_netapi进行攻击

    利用ms09_053_wins进行攻击 ms08_067漏洞 如果用户在受影响的系统上收到特制的 RPC 请求,则该漏洞可能允许远程执行代码. 在 Microsoft Windows 2000.Win ...