我们使用聚合物2.0为ag-grid创建了自定义元素。组件按照预期在chrome中加载，但是如何在IE中加载它。如果有任何人有解决此问题的方法，请告诉我们。请在下面找到我尝试过的代码：
AG-grid.html Ag-grid组件html文件
<link rel="import" href="/bower_components/ag-grid-polymer/ag-grid-polymer.html">
<link rel="import" href="./parent-child-renderer.html">
<script src="/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<!--<link rel="stylesheet" href="./ag-grid.css">-->
<dom-module id="simple-grid-example">
<template id="template">
<head>
<script src="/bower_components/ag-grid/dist/ag-grid.js"></script>
<link rel="stylesheet" href="/src/ag-grid/ag-grid.css">
<link rel="stylesheet" href="/bower_components/ag-grid/dist/styles/ag-grid.css">
<link rel="stylesheet" href="/bower_components/ag-grid/dist/styles/theme-fresh.css">
</head>
<div class="toolbar">
<label id="search">Search:</label><input type="text" id="quickFilter"> <button id="addrow">Add Row</button><br>
</div>
<ag-grid-polymer id="myGrid" style="height: 350px; width: 1000px;" class="ag-fresh ag-basic" row-height="22" on-grid-ready="[[onGridReady]]"></ag-grid-polymer>
</template>
<script type="text/javascript" src="./ag-grid.js">
</script>
</dom-module>
AG-grid.css 自定义元素simple-grid-example.this的样式表将覆盖基本的ag-grid样式。
.ag-paging-page-summary-panel {
float: left!important;
}
.ag-fresh .ag-header {
color: #fff !important;
background: #00559b!important;
}
.ag-fresh .ag-menu-option-active {
background-color: #e3f6ff!important;
}
.ag-fresh .ag-menu {
background-color: #fff!important;
font-size: 13px!important;
box-shadow: 0px 4px 9px 1px #cecece!important;
}
.ag-fresh .ag-row-odd {
background-color: #e3f6ff!important;
}
.ag-fresh {
color: #2d2d2d!important;
}
.ag-fresh .ag-paging-button {
margin-left: 4px!important;
margin-right: 4px!important;
cursor: pointer!important;
background: #fff!important;
border: solid 1px #cecece!important;
}
.ag-fresh .ag-paging-button:hover {
background: #0076BE!important;
border: solid 1px #cecece!important;
color: #fff!important
}
span.ag-paging-page-summary-panel {
float: right!important;
}
.ag-fresh .ag-ltr .ag-cell-no-focus {
border-right: 0!important;
}
.ag-fresh .ag-header-icon {
color: #fff!important;;
stroke: none!important;;
fill: #fff!important;;
}
.toolbar {
background: #00559b;
color: white;
width: 1000px;
height: 30px;
padding-top: 10px;
}
#addrow {
margin-left: 32px;
}
#search {
padding-left: 10px
}
AG-grid.js
class SimpleGridExample extends Polymer.Element {
static get is() {
return "simple-grid-example";
}
static get properties() {
return {
columnDefs: {
type: Object
},
rowData: {
type: Object
},
filter: {
type: Boolean,
value: true
},
order: {
type: Array,
value: ['desc', 'asc', null]
},
gridOptions: {
type: Object
},
selectedRows: {
type: Array
},
masterColumnDefs: {
type: Array
},
detailColumnDefs: {
type: Array
}
}
}
constructor() {
super();
this.columnDefs = [
{ headerName: "Make", field: "make", width: 238, cellRenderer: 'group', cellRendererParams: { suppressCount: true } },
{ headerName: "Model", field: "model", width: 238 },
{ headerName: "Price", field: "price", width: 237 },
{ headerName: "Edit/Delete", field: "price", width: 187, cellRendererFramework: 'child-cell-renderer' },
{ headerName: "Athlete", field: "athlete", width: 100, checkboxSelection: true, headerCheckboxSelection: true, headerCheckboxSelectionFilteredOnly: true }
];
this.rowData = [
{ make: "Toyota", model: "Celica", price: 35000 },
{ make: "Ford", model: "Mondeo", price: 32000 },
{ make: "Porsche", model: "Boxter", price: 72000 },
{ make: "TrailBlazer", model: "2000 ", price: 235465 },
{ make: "Trans Sport", model: " 2000", price: 235465 },
{ make: "Tredia", model: " 2000", price: 235465 },
{ make: "Tribute", model: " 2000", price: 235465 },
{ make: "Trooper", model: " 2000", price: 235465 },
{ make: "Tundra", model: " 2000", price: 235465 },
{ make: "Turbo", model: " 2000", price: 235465 },
{ make: "Turismo", model: " 2000", price: 235465 },
{ make: "Vanagon", model: " 2000", price: 235465 },
{ make: "Vandura", model: " 2000", price: 235465 },
{ make: "Vanquish", model: " 2000", price: 235465 },
{ make: "Vantage", model: " 2000", price: 235465 },
{ make: "VehiCROSS", model: " 2000", price: 235465 },
{ make: "Venture", model: " 2000", price: 235465 },
];
this.gridOptions = {
columnDefs: this.columnDefs,
rowData: this.rowData,
rowSelection: 'multiple',
enableFilter: 'true',
accentedSort: this.filter,
sortingOrder: this.order,
enableSorting: this.filter,
groupSelectsChildren: 'true',
pagination: true,
paginationPageSize: 10,
defaultColDef: {
editable: true
},
}
this.detailColumnDefs = [
{ headerName: 'Call ID', field: 'callId', cellClass: 'call-record-cell' },
{ headerName: 'Direction', field: 'direction', cellClass: 'call-record-cell' },
{ headerName: 'Number', field: 'number', cellClass: 'call-record-cell' },
{ headerName: 'Duration', field: 'duration', cellClass: 'call-record-cell' },
{ headerName: 'Switch', field: 'switchCode', cellClass: 'call-record-cell' }
];
}
ready() {
super.ready();
this.$.myGrid.gridOptions = this.gridOptions;
// this.addEventListener('click', e => this.onSelectionChanged(e));
this.$.addrow.addEventListener('click', e => { this.onAddRow(e) });
// this.$.myGrid.addEventListener('click', e => { this.onSelectionChanged(e) });
this.$.quickFilter.addEventListener('keyup', e => { this.filtergrid(e) });
}
onAddRow(e) {
let newItem = this.createNewRowData();
var res = this.gridOptions.api.updateRowData({ add: newItem });
this.printResult(res);
}
printResult(res) {
console.log('---------------------------------------')
if (res.add) {
res.add.forEach(function (rowNode) {
console.log('Added Row Node', rowNode);
});
}
if (res.remove) {
res.remove.forEach(function (rowNode) {
console.log('Removed Row Node', rowNode);
});
}
if (res.update) {
res.update.forEach(function (rowNode) {
console.log('Updated Row Node', rowNode);
});
}
}
createNewRowData() {
var newData = [{
make: "Toyota " + newCount,
model: "Celica " + newCount,
price: 35000 + (newCount * 17),
zombies: 'Headless',
style: 'Little',
clothes: 'Airbag'
}];
newCount++;
return newData;
}
onGridReady(params) {
console.log("Grid is now ready");
}
// onSelectionChanged(params) {
// console.log(event);
// this.selectedRows = this.gridOptions.api.getSelectedRows();
// console.log(this.selectedRows);
// }
filtergrid(event) {
this.gridOptions.api.setQuickFilter(event.target.value);
}
}
customElements.define(SimpleGridExample.is, SimpleGridExample);
var newCount = 1;
父 - 子渲染器
<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
<dom-module id="child-cell-renderer">
<template>
<style>
#dialog{
width: 350;
height:250px;
}
.text {
padding-left: 25px;
display: inline-block;
margin-right: 10px;
width: 150px;
}
label {
width: 75px;
clear: left;
padding-right: 10px;
float: left
}
</style>
<span><button style="height: 20px" on-click="invokeParentMethod" id="edit">Edit</button><button style="height: 20px" on-click="invokeParentMethod">Delete</button></span>
<paper-dialog id="dialog">
<label>Make:</label><input type="text" class="text" value=[[data.make]]><br>
<label>Model:</label><input type="text" class="text" value=[[data.model]]><br>
<label>Price:</label><input type="text" class="text" value=[[data.price]]><br>
<br>
<button>Save</button><br>
<button on-click="updateGrid" dialog-dismiss>Cancel</button><br>
</paper-dialog>
</template>
<script>
class ParentChildCellRenderer extends Polymer.Element {
static get is() {
return 'child-cell-renderer'
}
static get properties(){
return{
data:{
type:Array
}
}
}
agInit(params) {
this.params = params;
}
invokeParentMethod() {
this.params.context.componentParent.methodFromParent(`Row: ${this.params.node.rowIndex}, Col: ${this.params.colDef.headerName}`)
// var selectedRows = this.params.gridOptions.api.getSelectedRows();
console.log(this.params.data.make);
this.data=this.params.data;
}
toggleDialog(e) {
this.$.dialog.toggle();
}
updateGrid(){
}
ready() {
super.ready();
this.$.edit.addEventListener('click', e => { this.toggleDialog(e) });
}
}
customElements.define(ParentChildCellRenderer.is, ParentChildCellRenderer);
</script>
</dom-module>