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- ...
随机推荐
- No value specified for Date
现象 使用BeanUtils复制对象属性,结果抛出No value specified for Date异常. 原因 是数据源orig有一个参数是java.util.Date类型,没有初始化值,调用了 ...
- 007 CSS基本选择器
复习. 一:类选择器 1.多类名选择器 使用场景:某个标签上需要多个类进行描述. 多个类之间使用空格分开. 冲突的时候,和类名在html中的先后顺序没有关系,和css中的样式的先后顺序有关系. 2.案 ...
- 利用 Memory Dump Diagnostic for Java (MDD4J) 分析内存管理问题
利用 Memory Dump Diagnostic for Java (MDD4J) 分析内存管理问题(2) 启动和理解 MDD4J[size=1.0625]为了充分理解如何使用 MDD4J,您需要了 ...
- prometheus + influxdb + grafana + mysql
前言 本文介绍使用influxdb 作为prometheus持久化存储和使用mysql 作为grafana 持久化存储的安装方法 一 安装go环境 如果自己有go环境可以自主编译remote_stor ...
- Windows Vistual Studio 2013/2015 MRPT安装
博客参考:https://blog.csdn.net/qyjzhou/article/details/80110941 MRPT 安装 1. 官网编译好的程序直接安装 https://sourcefo ...
- sqllite 学习-1
C# SQLite 数据库操作学习: https://www.cnblogs.com/leemano/p/6578050.html SQLite 之 C#版 System.Data.SQLite 使用 ...
- 新检出普通web项目爬坑记【我】
新检出一个普通 web项目, 1.首先发现需要用到的一些代码包没有加到构建目录, 先加入构建: 2.然后发现项目大面积报错, 随便打开代码看下,发现是因为缺少jar包,因为报错的代码太多了,所以使用 ...
- 【html】css、js实现网页内容禁止选中
网页内容不能选中.复制应该如何实现呢? 通过css *{ moz-user-select: -moz-none; -moz-user-select: none; -o-user-select:none ...
- Hadoop记录-部署hadoop环境shell实现
#!/bin/bash menu() { echo "---欢迎使用hadoop部署管理程序---" echo "# 1.初始化Linux环境" echo &q ...
- System.getProperties 获取当前的系统属性
getProperties public static Properties getProperties() 确定当前的系统属性. 首先,如果有安全管理器,则不带参数直接调用其 checkProper ...