easyui的datagrid显示数据的方式(使用了jQuery)

第一步

创建显示的格式,方法有两种:

第一种:在HTML标签中创建,类似如下的形式,参数可以在标签中设置,也可以在脚本中

这种方式在显示时不用再设置显示方式

<table class="easyui-datagrid" style="width:400px;height:250px"
data-options="url:'this is a url',fitColumns:true,singleSelect:true">
<thead>
<tr>
<th data-options="field:'code',width:100">Code</th>
<th data-options="field:'name',width:100">Name</th>
<th data-options="field:'price',width:100,align:'right'">Price</th>
</tr>
</thead>
</table>

第二种:在JavaScript脚本中创建,在html标签中仅创建一个<div>标签,不用过多设置

这种在显示时需要通过  $(选择器).datagrid(显示格式变量名)  设置显示格式,之后的就和HTML的一致了

    <div id="show_data" title="this is install data list.">
</div>
    var installData =
{
fitColumns: true,
pagination: true,
showfooter: true,
rownumbers: true,
striped: true,
loadMsg: "loading...",
singleSelect: false,
pageSize: 30,
fit: true,
toolbar: [{
text: "查询",
iconCls: 'icon-search',
handler: function () {
return Search();
}
}],//toolbar
columns:
[
[
{ field: 'ID', title: '安装单号', align: 'center', sortable: false },
{ field: 'City', title: '安装城市', align: 'center', sortable: false },
{ field: 'Type', title: '呈现方式', align: 'center', sortable: false },
]
]//column数组
}//installData

这个类的所有属性名是固定的,在使用时datagrid会根据属性名设置相关属性。也可以在脚本其他位置用

变量名.属性名=...

来设置。

第二步

显示数据

方式一:直接在脚本中设置数据

        $('#show_data').datagrid(installData).datagrid({
data: [
{ "ID": "001", "CityName": "anhui", "Type": "a" },
{ "ID": "002", "CityName": "shanghai", "Type": "b" }
]
}
);

第一个datagrid()设置显示格式,第二个设置显示数据,注意数据的格式

方式二:通过URL获取数据

这种获取的数据格式应该为JSON格式,如果你设置的URL指向的是自己的函数,那么这个函数返回的数据应该设置为JSON格式,如果设置的不对,即便接收到了也不会显示出来

设置之后datagrid就会自动将数据设置为URL获取的数据并显示

我的URL指向的是MVC下的控制器:

installData.url = '@(Url.Action("SearchData","Home"))';
//public string Action(string actionName, string controllerName);方法解释

控制器函数:

        public ActionResult SearchData()
{
Install i1 = new Install();
Install i2 = new Install();
i1.ID=1;
i1.City="anhui";
i1.Type="a"; i2.ID=2;
i2.City="shanghai";
i2.Type="b"; Install[] list = {i1,i2};
// return Json(i1, JsonRequestBehavior.AllowGet);
return Json(new {
total=2,
rows=list
});
}

JSON数据对象需要两个参数:total和rows

total是数据的总行数,rows是数据数组。格式自定,但是要和显示格式一致,只有datagrid能够解释(名称一致)的部分才会显示,否则接收到但是不显示

如果想要在请求的时候发送参数,将数据显示格式的queryParams属性设置为传递的参数。如果是多个,可以以如下格式:

        var queryParams =
{
"ID": $('#installID').textbox('getValue'),
"City": $('#installCity').textbox('getValue'),
"Type": $('#installType').textbox('getValue')
};
        var queryParams = ... ;
installData.queryParams = queryParams;

easyui_datagrid使用的更多相关文章

  1. EasyUI_Datagrid学习总结

    EasyUI_Datagrid学习总结 2016年7月25日星期一 一.简介 Easyui中的datagrid从总的作用上讲,就是在列表上显示数据,类似于table,但是在table的基础上,此控件更 ...

  2. easyui_datagrid实现导出Excel

    easyui_datagrid实现导出Excel 一.PHPExcel使用方法 先下载PHPExcel类库文件,并引入. 二.利用AJAX实现datagrid导出Excel 原理:前台通过AJAX调用 ...

  3. easyui_datagrid 行内使用comobox的编码实现

    easyui datagrid组件的列属性中有一个editor属性,官方介绍如下: 所以,我们可以通过编码实现datagrid行内插入comobox的方式来实现某些场合的需要,具体编码实现如下: // ...

  4. easyui_datagrid合并行单击某行选中所有

    实现如下功能: 代码: <table id="dg" class="easyui-datagrid" title="Merge Cells fo ...

  5. EasyUI_datagrid

    案例一丶jquery.easyui.min.js:10631 Uncaught TypeError: this.renderEmptyRow is not a function 解决方法:datagr ...

  6. EasyUI_DataGrid数据操作

    1.html: <div style="width: 1100px;height: 350px ;overflow: scroll"> <table id=&qu ...

  7. datagrid数据表格的维护

    想想刚开始学jsp, 用application做一个简单的数据库, 简单的注册页面, 跟这个相比就是过家家 <%@ page language="java" contentT ...

  8. Ajax 常用资源

    regular online:http://regex.larsolavtorvik.com/ json online:http://json.cn/ Prototype:http://prototy ...

随机推荐

  1. SpringBoot学习笔记(11)-----SpringBoot中使用rabbitmq,activemq消息队列和rest服务的调用

    1. activemq 首先引入依赖 pom.xml文件 <dependency> <groupId>org.springframework.boot</groupId& ...

  2. 【AnjularJS系列1 】— 样式相关的指令

    最近,开始学习AngularJS. 开始记录学习AngularJS的过程,从一些很简单的知识点开始. 习惯先从实际应用的指令开始,再从应用中去体会AngularJS的优缺点.使用的场景等. 之前一直希 ...

  3. .NET Framework 3.5 无法安装以下功能 安装错误:0x800F0906(客户端加域后出现)

    问题:安装错误:0x800F0906    系统安装并加域后,在安装用友软件时提示没有.net 3.5 系统为win10 但是,点击确定后,却出现了这样的错误.如下: 点击下载并安装此功能,出现了这样 ...

  4. NOIp2018模拟赛三十八

    爆〇啦~ A题C题不会写,B题头铁写正解: 随手过拍很自信,出分一看挂成零. 若要问我为什么?gtmdsubtask! 神tm就一个subtask要么0分要么100,结果我预处理少了一点当场去世 难受 ...

  5. 2013-11-02 【webrebuild广州站】分享会纪要

    为了不让自己沉浸个人的技术研究当中,也为了多去接触业界新技术新思想,今天去参加了webrebuild广州站的一个分享交流会,效果不错,有一些获益.听了四个主题,依据个人获取信息的情况来做个纪要(比较粗 ...

  6. 移动端mete设置

    <!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --> <html lang="zh-cmn-Hans"&g ...

  7. Ubuntu 如何进入系统文件/etc/profile修改内容

    转载:https://blog.csdn.net/cfq1491/article/details/81088117 /etc/profile 默认权限为 -rw-r--r-- 即只有root用户可以修 ...

  8. ActiveMQ客户端配置使用

    一.通过JNDI来使用ActiveMQ 1.jndi配置JMS对象 java.naming.factory.initial = org.apache.activemq.jndi.ActiveMQIni ...

  9. 尼克的任务 dp 洛谷1280

    蒟蒻表示老久没看过dp题目了,,挺水的一道dp题目都没想出来,,, 首先设dp[i]表示从开始到i时间的最大空闲时间,用vector to[x] 表示从x点开始的任务结束时间,cnt[x]表示从x开始 ...

  10. Qt之QTimer

    简述 QTimer类提供了重复和单次触发信号的定时器. QTimer类为定时器提供了一个高级别的编程接口.很容易使用:首先,创建一个QTimer,连接timeout()信号到适当的槽函数,并调用sta ...