<!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8">
     <title>Basic Tabs - jQuery EasyUI Demo</title>
     <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
     <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
     <script type="text/javascript" src="easyui/jquery.min.js"></script>
     <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
 </head>
 <body>

     <div id="dg"></div>
     <a href="javascript:fun1();" class="easyui-linkbutton">按钮1</a>
     <a href="javascript:fun2();" class="easyui-linkbutton">按钮2</a>

 <script>
     $("#dg").datagrid({
         data:{"rows":[{"name":"项目一","num":1,"price":10,"amount":0},{"name":"项目二","num":2,"price":20,"amount":1}]},
         columns:[[
             {field:'id1',title:'id1',align:'center',hidden:true},
             {field:'id2',title:'id2',align:'center'},
             {field:'name',title:'项目',align:'center'},
             {field:'num',title:'数量',align:'center'},
             {field:'price',title:'价格',align:'center'},
             {field:'amo',title:'费用',align:'center',
                 formatter:function(value, row, index) {
                     return row.num * row.price;
                 }
             }
         ]],
         singleSelect: true
     });
     function fun1() {
         var rows = $("#dg").datagrid('getRows');
         console.log(rows);
     }
     function fun2() {
         $("#dg").datagrid('appendRow', {
             id1 : 1,
             id2 : 2,
             name : '项目三',
             num : 3,
             price : 30,
             amo : 90
         });
     }
 </script>
 </body>
 </html>

getRows方法获取到的行的field与columns中定义的无关，结果如下图所示。

u

easyui的getRows和appendRow方法使用结果记录的更多相关文章

  1. EasyUI常用控件禁用方法

    EasyUI常用控件禁用方法: 1.validatebox可以用的用法:前两种适用于单个的validatebox; 第三种应用于整个form里面的输入框; <1>.$("#id& ...

  2. Easyui扩展或者重载（方法和属性）

    1: 使用$.fn.datagrid.defaults.editors重载默认值. 每个编辑器都有以下方法: 名称 属性 描述 init container, options 初始化编辑器并返回目标对 ...

  3. easyui datagrid中 多表头方法总结

    easyui datagrid中怎么设置表头成多行显示呢?其实很简单,就是给datagrid的columns属性设置成多个数组就行了.下面直接看例子吧,这是一个两行表头的,按照此方法,还可以设置三行表 ...

  4. [js]jQuery EasyUI的linkbutton组件disable方法无法禁用jQuery绑定事件的问题分析

    问题由来 linkbutton 是 jQuery EasyUI 中常用的一个控件,可以使用它创建按钮.用法很简单,使用 a 标签给一个easyui-linkbutton 的class就可以了. < ...

  5. EasyUI中combobox的使用方法和一个代码实例

    一.easyUI中select下拉框动态添加option选项 问题:想在combobox的下拉项里动态添加一些内容,但是添加不成功.因为jquery easyui的下拉列表combobox是用DIV模 ...

  6. Easyui 控件的初始化方法

    问题: Easyui的控件在初始化的时候有两种方式: 页面指定class属性 js里初始化该id为easyui的控件 那么问题是: 如果页面不指定class属性,只是使用js初始化的话,会导致无法用控 ...

  7. Jquery EasyUI选项卡-Tabs的使用方法

    以下是easyUI的tabs的简单实用介绍. var e =$('#main').tabs('exists','accordion'); if(e==true){  $('#main').tabs(' ...

  8. EasyUi 中datagrid 实现查询方法

    1.在初始化表格方法中添加传入參数,例如以下: //初始化表格 function initTable(<strong><span style="color:#ff6666; ...

  9. EasyUI中, datagrid用loadData方法绑定数据。

    $("#dg").datagrid("loadData", { , " }, { "ck": "1", &qu ...

随机推荐

  1. 1，SFDC 开发篇 - 类对象和SOQL查询

    1,类对象 & 接口 & 属性   2, Object & SOQL    

  2. map和list遍历基础

    本文属原创,转载请注明出处:http://www.cnblogs.com/robinjava77/p/5456085.html (Robin) Map import java.util.HashMap ...

  3. 数据库——DQL（语句查询）

    查询的基本结构: 概念: 查询(DQL)是数据库中最为常用和复杂的一种SQL结构,学会编写查询SQL是程序员必须具备的能力. 要从数据库中查询数据,我们要使用SQL的SELECT语句.标准SELECT ...

  4. [转]简单理解Socket

    简单理解Socket 转自 http://www.cnblogs.com/dolphinX/p/3460545.html  题外话 前几天和朋友聊天,朋友问我怎么最近不写博客了,一个是因为最近在忙着公 ...

  5. 30款最好的 Bootstrap 3.0 免费主题和模板

    Twitter Bootstrap 框架已经广为人知,用于加快网站,应用程序或主题的界面开发,并被公认为是迄今对于 Web 开发的最有实质性帮助的工具之一.在此之前的,各种各样的界面库伴随着高昂的维护 ...

  6. iOS中CocoaPads的安装与配置（总结）

    来说一下安装CocoaPots的顺序: Xcode->homebrew->RVM->Ruby->CocoaPats; 这篇文章之讲解如何安装到Ruby的部分,关于安装好Ruby ...

  7. 10个顶级的CSS UI开源框架

    随着CSS3和HTML5的流行,我们的WEB页面不仅需要更人性化的设计理念,而且需要更酷的页面特效和用户体验.作为开发者,我们需要了解一些宝贵的CSS UI开源框架资源,它们可以帮助我们更快更好地实现 ...

  8. Modelica学习

    Annotation Choices for Suggested Redeclarations and Modifications Replaceable model sample(start,int ...

  9. sql server2008 字段类型

    bit    整型 bit数据类型是整型,其值只能是0.1或空值.这种数据类型用于存储只有两种可能值的数据,如Yes 或No.True 或False .On 或Off. 注意:很省空间的一种数据类型, ...

  10. bootstrap制作搜索框及添加回车搜索事件

    下面是开发中用bootstrap制作的一个搜索框,以及给搜索框添加回车搜索事件的一个小案例. bootstrap制作搜索框及添加回车搜索事件 下面是功能实现的代码: <!DOCTYPE html ...