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- ...
随机推荐
- Kotlin介绍
Kotlin介绍 转 https://www.jianshu.com/p/d30406daaf25 Google在今年的IO大会上宣布,将Android开发的官方语言更换为Kotlin,作为跟着Goo ...
- c++调用动态库失败解决办法
c++调用动态库失败解决办法 之前写好的程序今天早上过来发现在服务器上出错了,于是就各种查问题,整整一个早上外加下午两个小时都在查这个问题,最终被我找到了问题: 在程序中我发现LoadLibrary( ...
- 013-docker-安装-Centos7
1.搜索镜像 docker search centos 2.拉取合适镜像 选择合适tag:https://hub.docker.com/,下载合适版本 docker pull centos:6.6 d ...
- ES6深入浅出-4 迭代器与生成器-4.总结
yield的值就是外面调用next得到的值 ES6给的新的语法,如果你给任何一个对象添加一个Symbol.interator的key,同时它的值是一个生成器. 下面选中的就是生成器.生成返回的东西是迭 ...
- linux追加所有文件到新的文件（cat）
例子如下,存在test1.txt, test2.txt, test3.txt,现在准备把这三个文件的内容都追加到testall.txt 中 test1.txt 1 2 3 4 5 6 test2.tx ...
- Error:java: 发现警告, 但指定了 -Werror
最近在使用IntelliJ IDEA编译Apache Guacamole Web项目时,遇到了一个罕见的bug:"Error:java: 发现警告, 但指定了 -Werror",见 ...
- Nginx之开启压缩
参考:https://blog.csdn.net/php12345679/article/details/80843939 https://blog.csdn.net/pf1234321/articl ...
- 接口请求报错 504 Gateway Time-out
最近程序接口请求报了一个错误,如图 很明显的请求超时,以前也没出现过这个问题,突然就报了这个错,很懵. 百度之后网上说是nginx的问题,然后突然想起来,因为业务需要我在nginx里配了接口的转发. ...
- Linux习题1
1. GUN的含义是: GNU's Not UNIX . 2. Linux一般有3个主要部分:内核.命令解释层.实用工具. 3.POSIX是可携式操作系统接口的缩写,重点在规范核心与应用 ...
- git 获取线上代码并合并到本地
//查询当前远程的版本 $ git remote -v //获取最新代码到本地(本地当前分支为[branch],获取的远端的分支为[origin/branch]) $ git fetch origin ...