正文

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

IP云
IP云V管理员/3 阅读
11/30
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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>

相关阅读

目录[+]