`

[easyUI]datagrid用法

阅读更多

 

这里使用js方式:

<table id="dg"></table>

    $('#dg').datagrid({
        url:'datagrid_data.json',
        columns:[[
            {field:'code',title:'Code',width:100},
            {field:'name',title:'Name',width:100},
            {field:'price',title:'Price',width:100,align:'right'}
        ]]
    });

    $('#dg').datagrid('load', {
        name: 'easyui',
        address: 'ho'
    });

$('#dg').datagrid('reload');    // reload the current page data

 

传入参数:

 传入的数据是json类型,里面是List,自动会读取里面数据

 The data to be loaded. Available since version 1.3.2.

Code example:

$('#contentTables').datagrid("loadData",{"total":1,"rows": List<fooModel>});

 

 添加行:

$('#datagrid').datagrid('appendRow', csvInfos[0]);

 显然可见,如果直接展示数据,则使用loadData,但是传入的数据是对象List

但是添加数据,由于是添加一行,所以每次传入的反而是一个对象

 

参考:

1.https://www.jeasyui.com/documentation/datagrid.php

 2.https://blog.csdn.net/weinichendian/article/details/52595257

 

 点击:

$('#datagrid').datagrid({
	onSelect:function(rowIndex, rowData){
		console.log('row data: ' + rowData.filePath)
		download(rowData.filePath)
	}
});

rowData可以获取行内数据 

 

分享到:
评论

相关推荐

    easyui datagrid 表格 打印

    4. **使用JavaScript打印库**:可以利用像jsPDF这样的库,将Datagrid数据转换为PDF文档,再进行打印。这种方式不仅能够保留格式,还便于用户保存和分享。 5. ** formatter回调**:在打印前,通过遍历Datagrid的所有...

    EasyUI DataGrid过滤用法实例

    在这个"EasyUI DataGrid 过滤用法实例"中,我们将深入探讨如何利用 EasyUI 的 DataGrid 组件实现数据过滤功能,帮助用户更高效地查找和管理表格中的信息。 首先,`datagrid-filter.js` 文件很可能包含了实现过滤...

    easyui datagrid 数据导出到Excel

    **方法二:使用jQuery插件(如Jquery_easyui_datagrid_js导出excel.doc所示)** 文件`Jquery_easyui_datagrid_js导出excel.doc`可能是文档说明或者包含插件使用的示例代码。通常,jQuery插件能简化Datagrid数据导出...

    easyui datagrid 右冻结

    1. **理解EasyUI datagrid**:首先,你需要熟悉EasyUI datagrid的基本用法,包括其初始化、数据加载、列配置等。 2. **分析源码**:查看easyui的源代码,找到处理表格滚动的部分,理解其工作原理。 3. **创建固定...

    JS EasyUI DataGrid动态加载数据

    4. **自定义加载更多功能**: 如果需要自定义加载更多数据的行为,例如添加一个“加载更多”按钮,可以在按钮的点击事件中调用DataGrid的`reload`方法,传递新的页码和每页大小。 ```html ()"&gt;加载更多 function ...

    easyui datagrid 增加鼠标悬停弹窗事件

    在本示例中,我们关注的是如何在EasyUI的Datagrid组件上添加一个特殊功能:当鼠标悬停在某一行时,弹出一个窗口显示该行的关键信息,例如用于图片预览。以下是对这个知识点的详细解释: 1. **EasyUI Datagrid**: ...

    easyui datagrid在编辑状态下更新列的值

    在使用EasyUI框架开发Web应用时,Datagrid组件是一个非常重要的元素,它提供了一种方便的方式来展示和操作数据。在标题“easyui datagrid在编辑状态下更新列的值”中,我们关注的是如何在Datagrid的编辑模式下动态地...

    jquery easyui datagrid demo

    这个手册将覆盖更多组件的使用方法,提供丰富的示例代码,帮助我们更好地掌握 jQuery EasyUI 的各种功能。 总的来说,这个压缩包为学习和使用 jQuery EasyUI 的 Datagrid 提供了全面的资源,包括文档、示例代码和库...

    EasyUI Datagrid 中文排序的问题

    特别是在使用如EasyUI Datagrid这样的前端组件时,中文排序成为了开发者面临的一个常见挑战。本文将详细介绍如何解决EasyUI Datagrid中的中文排序问题,并分别从前端和后端两个角度给出具体的实现方案。 #### 二、...

    easyui datagrid 分页查询样例

    通过这个样例,开发者可以学习到如何结合EasyUI Datagrid和SpringMVC实现后台分页查询,理解前后端数据交互的原理,并且掌握相关框架和组件的使用。这将有助于提升Web应用的数据展示效率和用户体验。

    easyui datagrid 多条件筛选 可复选 类似淘宝筛选

    本文将深入探讨如何使用EasyUI datagrid实现多条件筛选功能,特别是支持可复选的筛选条件,类似于淘宝网站上的商品筛选功能。 首先,`datagrid`是EasyUI中的一个核心组件,它用于展示数据表格,支持分页、排序、...

    解决EasyUIdataGrid列比较多,无数据,列展现不全

    在使用EasyUI框架进行前端开发的过程中,可能会遇到dataGrid组件在数据为空时列显示不完整的问题。这不仅影响用户体验,也降低了系统的可用性。本文将详细介绍如何解决当dataGrid列较多且无数据显示不全的情况,并...

    easyui datagrid 导出到excel

    - AJAX获取数据:首先,你需要通过AJAX请求获取Datagrid中的所有数据,通常使用`getData()`方法获取表格中的行数据。 - 构建CSV字符串:将获取到的数据转化为CSV(逗号分隔值)格式,因为CSV可以直接被Excel识别。...

    easyui datagrid标题列宽度自适应

    EasyUI是一个基于jQuery的轻量级框架,提供了一系列易于使用的UI组件,包括datagrid,用于创建表格布局。 在EasyUI的datagrid中,列的宽度通常可以设置为固定、自动或自适应。固定宽度是直接设定每列的具体像素值;...

    easyui datagrid实现实现上下左右和回车切换单元格

    使用 JavaScript 来扩展 DataGrid 的方法,以便支持键盘导航。具体实现代码如下: ```javascript $.extend($.fn.datagrid.methods, { editCell: function(jq, param) { return jq.each(function() { var opts = ...

    落阳-利用NPOI将EasyuiDatagrid数据导出到Excel-ASP.NET MVC Demo

    本示例项目"落阳-利用NPOI将EasyuiDatagrid数据导出到Excel-ASP.NET MVC Demo"提供了一个解决方案,通过使用NPOI库来实现这一功能。 NPOI是一个强大的.NET库,它允许开发者在.NET环境中读写Microsoft Office文件,...

    jQuery EasyUI编辑DataGrid用combobox实现多级联动

    在jQuery EasyUI中,DataGrid是一种常用的表格展示控件,它可以与各种编辑器结合使用,如combobox(下拉框)来实现更丰富的交互功能。本文主要探讨的是如何利用jQuery EasyUI的DataGrid和combobox组件实现多级联动的...

    easyUI datagrid 简便使用文件(含api文档)

    在"easyUI datagrid 简便使用文件(含api文档)"这个压缩包中,包含的资源可能是一系列帮助开发者更便捷地使用 EasyUI datagrid 的代码示例、配置说明以及 API 文档。 datagrid 是 EasyUI 的核心组件之一,主要用于...

    easyui的datagrid中editor和combobox的级联

    ### easyui的datagrid中editor和combobox的级联 在前端开发中,easyui是一个非常实用的库,它提供了一套完整的用户界面组件,能够帮助开发者快速构建出功能丰富的Web应用。其中,`datagrid`是easyui提供的一个重要...

Global site tag (gtag.js) - Google Analytics