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- ...

随机推荐

Centos 安装 nginx 特定版本
CentOS 6.9/7通过yum安装指定版本的Nginx - EasonJim - 博客园https://www.cnblogs.com/EasonJim/p/9020896.html [root@ ...
ArrayAdapter和ListView
利用ArrayAdapter向ListView中添加数据 <?xml version="1.0" encoding="utf-8"?> <Li ...
flutter 不规则底部工具栏实现
import 'package:flutter/material.dart'; import 'each_view.dart'; class BottomAppBarDemo extends Stat ...
Win10 x64 pnglib Release
Win10 x64 pnglib Release >------ 已启动生成: 项目: ZERO_CHECK, 配置: Release x64 ------ > Checking Buil ...
Laya微信小游戏本地缓存
测试版本2.1.1.1 查看bin/libs/laya.wxmini.js. 发现只会缓存png,jpg. 声音和atlas,json不会缓存. 对比白鹭,白鹭是将png,jpg,atlas,json ...
【438】Python 处理文件
1. 读取文件,计算 tweets 数目 python中readline判断文件读取结束的方法 line == '' python:如何检查一行是否为空行 line == '\n' or line = ...
C# WinForm获取当前执行程序路径的几种方法（转）
1.获取和设置当前目录的完全限定路径. string str = System.Environment.CurrentDirectory; Result: C:xxxxxx 2.获取启动了应用程序的可 ...
systemctl service
一.systemctl常用命令 systemctl list-units ##列出当前系统服务的状态 systemctl list-unit-files ##列出服务 ...
[转]如何更换 Ubuntu 18.04 LTS 的 GDM 登录界面背景
链接地址:https://www.linuxprobe.com/ubuntu-gdm-login.html
docker安装fastdfs碰到storage的IP地址映射宿主地址问题
一.概述最近公司准备全面实施docker部署,解决每次项目实施安装部署环境工作量大问题,mysql5.7.oracle12c很顺利,在安装fastdfs时碰到storage的IP地址映射问题.服务器 ...

DevExtreme学习笔记(一) DataGrid中js分析

DevExtreme学习笔记(一) DataGrid中js分析的更多相关文章

随机推荐

热门专题