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分析的更多相关文章

  1. DevExtreme学习笔记(一) DataGrid中MVC分析

    @(Html.DevExtreme().DataGrid() .ID("gridContainer") .DataSource(d => d .OData() .Url(&q ...

  2. DevExtreme学习笔记(一) DataGrid中数据提交注意事项

    1.数据提交的{}数据需转化json格式 syncPost('/controller/action', { values: JSON.stringify({d:x}) }, function (res ...

  3. DevExtreme学习笔记(一) DataGrid中数据筛选

    config.filterRow = { visible: true, applyFilter: "auto" }; config.headerFilter = { visible ...

  4. DevExtreme学习笔记(一) DataGrid中注意事项

    1.阻止cell编辑 config.onEditorPreparing = function (e) { if (e.dataField === 'xx' && e.row.data. ...

  5. memcached学习笔记——存储命令源码分析下篇

    上一篇回顾:<memcached学习笔记——存储命令源码分析上篇>通过分析memcached的存储命令源码的过程,了解了memcached如何解析文本命令和mencached的内存管理机制 ...

  6. memcached学习笔记——存储命令源码分析上篇

    原创文章,转载请标明,谢谢. 上一篇分析过memcached的连接模型,了解memcached是如何高效处理客户端连接,这一篇分析memcached源码中的process_update_command ...

  7. input子系统学习笔记六 按键驱动实例分析下【转】

    转自:http://blog.chinaunix.net/uid-20776117-id-3212095.html 本文接着input子系统学习笔记五 按键驱动实例分析上接续分析这个按键驱动实例! i ...

  8. 并发编程学习笔记(4)----jdk5中提供的原子类及Lock使用及原理

    (1)jdk中原子类的使用: jdk5中提供了很多原子类,它会使变量的操作变成原子性的. 原子性:原子性指的是一个操作是不可中断的,即使是在多个线程一起操作的情况下,一个操作一旦开始,就不会被其他线程 ...

  9. CockroachDB学习笔记——[译]CockroachDB中的SQL:映射表中数据到键值存储

    CockroachDB学习笔记--[译]CockroachDB中的SQL:映射表中数据到键值存储 原文标题:SQL in CockroachDB: Mapping Table Data to Key- ...

随机推荐

  1. Centos 安装 nginx 特定版本

    CentOS 6.9/7通过yum安装指定版本的Nginx - EasonJim - 博客园https://www.cnblogs.com/EasonJim/p/9020896.html [root@ ...

  2. ArrayAdapter和ListView

    利用ArrayAdapter向ListView中添加数据 <?xml version="1.0" encoding="utf-8"?> <Li ...

  3. flutter 不规则底部工具栏实现

    import 'package:flutter/material.dart'; import 'each_view.dart'; class BottomAppBarDemo extends Stat ...

  4. Win10 x64 pnglib Release

    Win10 x64 pnglib Release >------ 已启动生成: 项目: ZERO_CHECK, 配置: Release x64 ------ > Checking Buil ...

  5. Laya微信小游戏本地缓存

    测试版本2.1.1.1 查看bin/libs/laya.wxmini.js. 发现只会缓存png,jpg. 声音和atlas,json不会缓存. 对比白鹭,白鹭是将png,jpg,atlas,json ...

  6. 【438】Python 处理文件

    1. 读取文件,计算 tweets 数目 python中readline判断文件读取结束的方法 line == '' python:如何检查一行是否为空行 line == '\n' or line = ...

  7. C# WinForm获取 当前执行程序路径的几种方法(转)

    1.获取和设置当前目录的完全限定路径. string str = System.Environment.CurrentDirectory; Result: C:xxxxxx 2.获取启动了应用程序的可 ...

  8. systemctl service

    一.systemctl常用命令 systemctl list-units            ##列出当前系统服务的状态 systemctl list-unit-files       ##列出服务 ...

  9. [转]如何更换 Ubuntu 18.04 LTS 的 GDM 登录界面背景

    链接地址:https://www.linuxprobe.com/ubuntu-gdm-login.html

  10. docker安装fastdfs碰到storage的IP地址映射宿主地址问题

    一.概述 最近公司准备全面实施docker部署,解决每次项目实施安装部署环境工作量大问题,mysql5.7.oracle12c很顺利,在安装fastdfs时碰到storage的IP地址映射问题.服务器 ...