JS easyui-datagrid

本地数据格式为:

var data = {‘total‘:4,‘rows‘:[{"student_id":"1234567",
                "student_name":"李丽",
                "student_idcard":"654221199008010102",
                "learn_level":"0",  //学习阶段
                "arrearage":"0",    //欠费
                "item_id":"001",    //资费id
                "item_name":"报名费",  //资费项目
                "count":"16",        //使用量
                "unit":"hour",       //单位
                "study_hour":"16",    //学时
                "application_type":"0",  //申请类型 0代表初次申请,1代表增驾申请
                "islocal":"0",        //是否本地
                "regular_score":"8",  //平时表现
                "test_value":"95",    //测试成绩
                "file_no":"2016070701",   //档案号
                "wechatnum":"zxc123456",  //微信号
                "date":"2016-06-20 44:43:45",
                "user":"王刚"}]} //操作员

在function中,通过

$(function(){
         $obj=$("#id").datagrid({
                        title:‘考试报名信息‘,
            iconCls: ‘icon-a_detail‘, //图标
            fit: true, //datagrid自适应宽度
            height : ‘auto‘,
            striped : true,
            fitColumns:true,
            nowrap : false,
            border : false,
            idField: ‘student_id‘, //主键
            columns : [ [
                            {field:‘student_id‘,title:‘学生ID‘ ,width:"80"} //数据显示
                        ] ]
                        });
                        });
                    $(‘#id‘).datagrid(‘loadData‘,data);//将数据加载到id中

PS:datagrid加载数据为json数组

时间: 2024-10-28 21:50:38

JS easyui-datagrid的相关文章

easyui datagrid load 封装 参数问题 js 作用域

var temp = { LoginAccount: $('#LoginAccount').val(), ShopName: $('#ShopName').val() }; function doSearch1() { $('#datagrid').datagrid('load', temp); } function doSearch2() { $('#datagrid').datagrid('load', { LoginAccount: $('#LoginAccount').val(), Sh

[JS][easyui]jQuery EasyUI Datagrid VirtualScrollView视图简单分析

 大家都知道EasyUI的Datagrid组件在加载大数据量时的优势并不是很明显,相对于其他一些框架,如果数据量达到几千,便会比较慢,特别是在IE下面.针对这种情况,我们首要做的是要相办法优化datagrid组件的各方面性能,不过任何事情都是可以变通解决的,virtualScrollView就是一种不错的解决方案. virtualScrollView的准则就是尽量少画tr到table里,表格的高度是有限的,而用户的可见区域是很有限的,所以数据量很大的时候,是没有必要将所有数据数据都画到表格中

JQuery EasyUI 学习——Struts2与EasyUI DataGrid数据表格结合使用显示数据库数据

因为EasyUI DataGrid只要取出后台传过来的一定格式的JSON数据,就可以在前台页面数据表格中,以一定形式显示数据库中的数据.此处,我们使用Struts2框架整合DataGrid,实现数据的显示. 一.页面内容 为了在页面中显示数据库中字段内容,需要定义一个table,通过EasyUI内部设计,自动显示数据,如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF

初识 easyui datagrid

首先应该下载好easyui datagrid所用的各种js 和css 这个可以到官网上去下载. 首先要引入datagrid所引入的js和css. <script src="js/jquery.min.js"></script><script src="js/jquery.easyui.min.js"></script><link rel="stylesheet" type="text

easyUI datagrid笔记

easyUI datagrid 简单使用与注意细节 背景: 业余爱好,使用了一下easyUI的搜索框与数据表格,并把两者整合起来进行使用. 使用前提(引入需要的js and css): <link rel="stylesheet" type="text/css" href="./css/easyui.css"> <link rel="stylesheet" type="text/css"

转easyui datagrid 前台分页的实现

easyui datagrid 前台分页的实现java采用的版本 来源:本站原创 js知识 超过5,090人围观 暂无评论 使用easyui分页,有后台服务器端实现和前台浏览器端实现.服务器端实现按规定的格式返回数据就可以了,前台实现需要写js来实现. 代码如下: 关键代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 function pagerFilter(data){      

easyui datagrid中datetime字段的显示和增删改查问题

datagrid中datetime字段的异常显示: 使用过easyui datagrid的应该都知道,如果数据库中的字段是datetime类型,绑定在datagrid显式的时候会不正常显示,一般需要借助于formatter来格式化时间格式 { title: '活动开始时间', field: 'BeginTime', width: 300, editor: { type: 'datetimebox', options: { required: true }, formatter: function

easyUI Datagrid 控件 param参数的用途探索

关于easyUI Datagrid  控件 param参数,官方文本很少解释,主要有如下说明: queryParams object When request remote data, sending additional parameters also. Code example: $('#dg').datagrid({ queryParams: { name: 'easyui', subject: 'datagrid' } }); 有人认为这个参数可有可无,比如: queryParams这个

easyui datagrid 导出excel

本片文章是介绍如何用ajax的方式将easyui中的datagrid数据导出到excel中. 声明:该代码是在参考前人的代码写出来的,并非我原创,我只是新增了些功能. 新增部分: 1. 对于列是枚举列的可以设置枚举值,导出时会自动替换列中的枚举值,详细见用例代码. 2. 新增导出时不导出首列或末列指定个数的列,详细接用例代码. 下面是插件源码: /** Jquery easyui datagrid js导出excel 修改自extgrid导出excel * allows for download

easyui datagrid 合并单元格

整理以前做的东西,这个合并单元格的问题再新浪博客也写过了..... 下面这段代码是列表数据 //载入排放系数管理报表数据 function LoadEmissionReportData() { //获取计算ID var CountID = getUrlParam("CountID"); $.ajax({ type: "POST", url: "../Ashx/GetGasInventoryListInfo.ashx?type=getParamReport&