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

随机推荐

visual studio python快捷键
打开交互式窗口: alt + i 智能提示: ctrl + j, or alt + ->
nodejs设置淘宝镜像
nodeJS的资源仓库在国内使用过程中,偶尔会遇到各种资源问题,通常设置为淘宝的镜像,网上很多说法是安装淘宝镜像,即$ npm install -g cnpm --registry=https://r ...
用google translate大文件
问题: google translate对于大文件不支持,咋办? 思路:自己写个函数把的文件拆成小文件,再用google translate! code: from googletrans impor ...
nginx报警：nginx: [warn] could not build optimal server_names_hash, you should increase either server_names_hash_max_size: 512 or server_names_hash_bucket_size: 64; ignoring server_names_hash_bucket_size
date: 2019-08-12 16:33:05 author: headsen chen notice :个人原创告警现象: 解决办法:在http的部分添加hash缓冲值测试:如下图, ...
Vuex 的使用 State Mutation Getter Action
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); /*1.state在vuex中用于存储数据*/ var state={ cou ...
【转载】 180623 Conda install 本地压缩包文件tar.bz2
原文地址“ https://blog.csdn.net/qq_33039859/article/details/80785535 ----------------------------------- ...
Influxdb修改数据保留策略
retention policy: 存储策略,用于设置数据保留的时间,每个数据库刚开始会自动创建一个默认的存储策略 autogen,数据保留时间为永久,之后用户可以自己设置,例如保留最近2小时的数据. ...
Opencv加载网络图片
opencv加载网络图片 #include <iostream> #include <opencv2/opencv.hpp> using namespace std; usin ...
【432】COMP9024，Exercise9
eulerianCycle.c What determines whether a graph is Eulerian or not? Write a C program that reads a g ...
使用supervisor支持Python3程序（解决找不到Module的问题）
Supervisor是python2写就的一款强大的运维工具(其实现在已经支持Python3了 https://github.com/Supervisor/supervisor)那么怎么利用Super ...

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

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

随机推荐

热门专题