DevExtreme学习笔记(一) DataGrid中js分析
1.overview
js采用
$(function() {
$("#gridContainer").dxDataGrid({
dataSource: {
store: {
type: "odata",
url: "https://js.devexpress.com/Demos/SalesViewer/odata/DaySaleDtoes",
beforeSend: function(request) {//请求参数
request.params.startDate = "2018-05-10";
request.params.endDate = "2018-05-15";
}
}
},
paging: {
pageSize: 10//当前分页数
},
pager: {
showPageSizeSelector: true,
allowedPageSizes: [10, 25, 50, 100]
},
remoteOperations: false,
searchPanel: {
visible: true,
highlightCaseSensitive: true
},
groupPanel: { visible: true },
grouping: {
autoExpandAll: false
},
allowColumnReordering: true,
rowAlternationEnabled: true,
showBorders: true,
columns: [
{
dataField: "Product",
groupIndex: 0
},
{
dataField: "Amount",
caption: "Sale Amount",//标题
dataType: "number",//数字类型
format: "currency",//符号美元
alignment: "right",
},
{
dataField: "Discount",
caption: "Discount %",
dataType: "number",//数字类型
format: "percent",//符号%
alignment: "right",
allowGrouping: false,
cellTemplate: discountCellTemplate,//设置参数变量
cssClass: "bullet"//冒泡
},
{
dataField: "SaleDate",
dataType: "date"
},
{
dataField: "Region",
dataType: "string"
},
{
dataField: "Sector",
dataType: "string",
},
{
dataField: "Channel",
dataType: "string",
},
{
dataField: "Customer",
dataType: "string",
width: 150
}
],
onContentReady: function(e) {
if(!collapsed) {
collapsed = true;
e.component.expandRow(["EnviroCare"]);
}
}
});
});
var discountCellTemplate = function(container, options) {
$("<div/>").dxBullet({
onIncidentOccurred: null,
size: {
width: 150,
height: 35
},
margin: {
top: 5,
bottom: 0,
left: 5
},
showTarget: false,
showZeroLevel: true,
value: options.value * 100,
startScaleValue: 0,
endScaleValue: 100,
tooltip: {
enabled: true,
font: {
size: 18
},
paddingTopBottom: 2,
customizeTooltip: function() {
return { text: options.text };
},
zIndex: 5
}
}).appendTo(container);
};
var collapsed = false;
js引用
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/event.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/supplemental.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/unresolved.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/message.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/number.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/currency.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/date.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.4/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/19.1.4/js/dx.all.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<body class="dx-viewport">
<div class="demo-container">
<div id="gridContainer"></div>
</div>
</body>
DevExtreme学习笔记(一) DataGrid中js分析的更多相关文章
- DevExtreme学习笔记(一) DataGrid中MVC分析
@(Html.DevExtreme().DataGrid() .ID("gridContainer") .DataSource(d => d .OData() .Url(&q ...
- DevExtreme学习笔记(一) DataGrid中数据提交注意事项
1.数据提交的{}数据需转化json格式 syncPost('/controller/action', { values: JSON.stringify({d:x}) }, function (res ...
- DevExtreme学习笔记(一) DataGrid中数据筛选
config.filterRow = { visible: true, applyFilter: "auto" }; config.headerFilter = { visible ...
- DevExtreme学习笔记(一) DataGrid中注意事项
1.阻止cell编辑 config.onEditorPreparing = function (e) { if (e.dataField === 'xx' && e.row.data. ...
- memcached学习笔记——存储命令源码分析下篇
上一篇回顾:<memcached学习笔记——存储命令源码分析上篇>通过分析memcached的存储命令源码的过程,了解了memcached如何解析文本命令和mencached的内存管理机制 ...
- memcached学习笔记——存储命令源码分析上篇
原创文章,转载请标明,谢谢. 上一篇分析过memcached的连接模型,了解memcached是如何高效处理客户端连接,这一篇分析memcached源码中的process_update_command ...
- input子系统学习笔记六 按键驱动实例分析下【转】
转自:http://blog.chinaunix.net/uid-20776117-id-3212095.html 本文接着input子系统学习笔记五 按键驱动实例分析上接续分析这个按键驱动实例! i ...
- 并发编程学习笔记(4)----jdk5中提供的原子类及Lock使用及原理
(1)jdk中原子类的使用: jdk5中提供了很多原子类,它会使变量的操作变成原子性的. 原子性:原子性指的是一个操作是不可中断的,即使是在多个线程一起操作的情况下,一个操作一旦开始,就不会被其他线程 ...
- CockroachDB学习笔记——[译]CockroachDB中的SQL：映射表中数据到键值存储
CockroachDB学习笔记--[译]CockroachDB中的SQL:映射表中数据到键值存储 原文标题:SQL in CockroachDB: Mapping Table Data to Key- ...
随机推荐
- futex的设计与实现
介绍 futex(快速用户空间互斥)是Linux的一个基础组件,可以用来构建各种更高级别的同步机制,比如锁或者信号量等等,POSIX信号量就是基于futex构建的.大多数时候编写应用程序并不需要直接使 ...
- Springmvc & Report： FineReport vs BIRT vs Jasperreport
Springmvc与jasperreport结合生成报表的一种方法 - OneThin的个人空间 - OSCHINAhttps://my.oschina.net/onethin/blog/14360 ...
- Leetcode: Stream of Characters
Implement the StreamChecker class as follows: StreamChecker(words): Constructor, init the data struc ...
- Linux_CentOS 打包压缩和别名管理
Linux 打包压缩命令 目前 linux 中打包和压缩的命令很多,最常用的方法有 zip.gzip.bzip2.xz.tar 1.zip 压缩包 1.制作 zip -r public.zip pub ...
- React错误收集
1. Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/ ...
- Qt编写气体安全管理系统7-设备监控
一.前言 设备监控模块是地图监控模块的延伸,只不过是将设备做成一个个的独立的面板显示,类似于屏幕一样,展示的信息会更多一些,比如设备的名称型号等,有多少个设备就有多少个这样的设备面板,这个主要是针对不 ...
- Qt编写气体安全管理系统5-数据监控
一.前言 本项目对设备的监控有四种视图模式,可以任意切换,数据监控.地图监控.设备监控.曲线监控,其中数据监控是最常用的,所以在主界面导航中也排在第一位,综合观察分析了很多气体安全或者组态监控软件,大 ...
- NSGA,NSGA-II,Epsilon-MOEA,DE C语言Deb教授原版代码
NSGA,NSGA-II,Epsilon-MOEA,Basic Differential Evolution (DE) C语言Deb教授原版代码地址 觉得有用的话,欢迎一起讨论相互学习~[Follow ...
- Python - Django - 模板语言之 Tags（标签）
标签使用 {% %} 注释语句:{# #} for 循环: views.py: from django.shortcuts import render, redirect, HttpResponse ...
- 数据库分库分表中间件ShardingSphere推荐
官网链接:http://shardingsphere.io/document/current/cn/overview/ 源起: 我今天首先去了解了一下国内好像是比较火的一个叫"MyCat&q ...