探索前沿技术
      展示技术风采

ag-grid中文实战续集

ag技术点:如何请求数据渲染到单元格

首页,我们看开发文档或者数据结构

 

 

 

默认已经知道表结构了,或者说表头(如果表头都不知道呢?后续待完善)

beforeMount() {
this.columnDefs = [
{headerName: ‘Make’, field: ‘make’},
{headerName: ‘Model’, field: ‘model’},
{headerName: ‘Price’, field: ‘price’}
];
this.defaultColDef={
width:100,
}
}

然后data()中定义rowData: [],数据需要请求数据渲染
data() {
   return {
     gridOptions: {},
     columnDefs: null,
     defaultColDef:null,
     rowData: [],
   }

先引入’axios’

import axios from 'axios'
ag-grid中文实战

ag-grid中文实战

 

 

 

 

然后写点击事件

<button @click=onGetData()>请求数据渲染到单元格</button>然后写方法:

methods:{
onGetData(){
let _this=this; //将this声明为其他变量,因为下面在异步查询需要用到this.rowData,在异步里面用this的话,该this是异步里面的                                  //this而不是原先外面这个this,因为进入异步方法this代表当前的这个异步的this
axios.get(‘https://api.myjson.com/bins/15psn9’) //进行异步获取
.then(function (response) {    //response获取响应数据
_this.rowData=response.data;  //将获取到的数据放入到指定的vm.rowData(其实就是外面的this.Data)
})
.catch(function (error) { //异步加载失败,抛异常
console.log(error);
})
}
}

就可以了

ag技术点:表格自适应大小调整

/对应的是表头

var columnDefs=[

{headerName:’姓名’,field:’name’},

{headerName:’性别’,field:’sex’},

{headerName:’年龄’,field:’age’},

];

//与表头对应的表格的数据; key来至于上方定义的field;

var rowData=[

{name:’张三’,sex:’男’,age:’100′},

{name:’李四’,sex:’女’,age:’5′},

{name:’王五’,sex:’未知’,age:’50’},

]

数据格式如上所述 ;对于ajax请求回来的数据 我们只要处理成与rowData一致的格式且与columnDefs表头提供的key值对应即可;

//将上面的数据放入一个数组中;

var gridOptions = {

columnDefs: columnDefs,

rowData: rowData,

};

//在dom加载完成后 获取我们刚才定义的id 然后将它们一起传入对象中就大功告成了;

document.addEventListener(“DOMContentLoaded”, function () {

var eGridDiv = document.querySelector(‘#myGrid’);

new agGrid.Grid(eGridDiv, gridOptions);

});

这个时候我们打开html文件;你会发现表格已经生成;如图所示:

ag-grid中文实战

ag-grid中文实战

 

 

 

 

接着我们可以试着调用一下插件默认的一些方法; 在gridOptions中这样写:

//对应的是表头

var columnDefs=[

{headerName:’姓名’,field:’name’},

{headerName:’性别’,field:’sex’},

{headerName:’年龄’,field:’age’},

];

 

//与表头对应的表格的数据; key来至于上方定义的field;

var rowData=[

{name:’张三’,sex:’男’,age:’100′},

{name:’李四’,sex:’女’,age:’5′},

{name:’王五’,sex:’未知’,age:’50’},

]

//将上面的数据放入一个数组中;

var gridOptions = {

columnDefs: columnDefs,

rowData: rowData,

onGridReady: function () {//表格创建完成后执行

gridOptions.api.sizeColumnsToFit();//调整表格大小自适应

}

};

//在dom加载完成后 获取我们刚才定义的id 然后将它们一起传入对象中就大功告成了;

document.addEventListener(“DOMContentLoaded”, function () {

var eGridDiv = document.querySelector(‘#myGrid’);

new agGrid.Grid(eGridDiv, gridOptions);

});

这样在表格创建完成后 会它会自己去调整行列的宽高,这个时候我们打开html文件我们会发现滚动条已经不见了;

ag-grid中文实战

ag-grid中文实战

 

 

 

 

 

 

ag技术点:如何增加num列

columnDefs中增加

valueGetter: function(params){

return params.node.childIndex + 1;
},

列如:

this.columnDefs = [
{headerName: ‘Num’,

valueGetter: function(params){

                return params.node.childIndex + 1;

},

         field: ‘num’,

        width:70,

         cellStyle: {

              border: ‘1px solid #CCCCCC’,

             borderRight:‘none’,

             ‘text-align’: ‘center’,

            fontSize:’12px’,

           fontFamily:微软雅黑”

}

}

];

以上设置足够了, this.rowData 中不用再为'Num'做单元格配置.效果如下:
ag-grid中文实战

ag-grid中文实战

 

 

 

 

 

{make: 编辑’, model: ‘Celica’, price: 35000},

因为配置了也没有任何效果

{num:“数子”, make: ‘编辑’, model: ‘Celica’, price: 35000},

ag技术点:表格增加checkbox单选列

https://www.ag-grid.com/javascript-grid-selection/#multi-select-single-click

columnDefs中增加checkboxSelection: true

列如:

{headerName: ‘checkbox’,checkboxSelection: true, colId: “rowNum”,field: ‘checkbox’,width:120,cellStyle: {border: ‘1px solid #CCCCCC’,borderRight:‘none’, ‘text-align’: ‘center’,fontSize:’12px’,fontFamily:微软雅黑”}},

以上设效果如下:

ag-grid中文实战

ag-grid中文实战

 

 

 

 

 

如果这个时候为‘checkbox’做单元格配置,配置的文字会跟在checkbox框的后面

{checkbox: 点击勾选’,make: 编辑’, model: ‘Celica’, price: 35000},
{checkbox: ‘点击勾选’,make: 编辑’, model: ‘Mondeo’, price: 32000},

效果如下:

ag-grid中文实战

ag-grid中文实战

 

 

 

 

 

默认一个都没勾选,但对于所有的行来说,只能勾选一个(相当于单选)

ag技术点: gridOptions{}下的三个属性

设置行的高度

rowHeight:18,

 

设置行的样式,因为cellstyle的一些样式写在gridOptions下无效,所以尽可能的写在cellstyle

rowStyle :{
   borderBottom:'1px solid #CCCCCC',
   textAlign: 'left',
   fontSize:'12px',
   fontFamily:"微软雅黑",
   lineHeight:'16px',
 },

表头的行高

headerHeight:25,

注意事项:
目前的研究结果,cellstyle只有写在才生效

this.columnDefs = [
{headerName: ‘Num’,colId: “rowNum”, valueGetter: function(params){return params.node.childIndex + 1;}, field: ‘num’,width:70,cellStyle: {lineHeight:“16px”,‘text-align’: ‘center’}},
{headerName: 单选框’,checkboxSelection: true, colId: “rowNum”,field: ‘checkbox’,width:120,cellStyle: {lineHeight:“16px”,‘text-align’: ‘center’}},
{headerName: ‘Make’, colId: “rowNum”,field: ‘make’,width:80,cellStyle: {lineHeight:“16px”,‘text-align’: ‘center’}},

];

ag技术点: cellClassRules属性

是表格规则类(满足条件就添加这个类)

比如xxxx条件下添加样式,可以在外部定义类

.typeofNumber{
text-align: right !important;
}
.typeofString{
text-align: left !important;
}

columnDefs中写规则,写法是cellClassRules : { ‘ 类名 ’  : 规则 }

this.columnDefs = [

{headerName: ‘Mode5’, colId: “rowNum”,field: ‘model’,cellStyle: {lineHeight:“16px”,‘text-align’: ‘center’},cellClassRules:{
‘typeofNumber’: function(params) { return typeof params.value === “number”},
‘typeofString’: function(params) { return typeof params.value === “string”},
},},

];

如果cellClassRules产生的样式和cellStyle的样式冲突, cellClassRules的样式的优先级更高!!!!!!!!!!!!

以上就是本地的ag-grid中文实战分享
×

感谢您的支持,我们会一直保持!

扫码支持
请土豪扫码随意打赏

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

赞(2) 打赏
未经允许不得转载:醉探索戈壁 » ag-grid中文实战续集
分享到: 更多 (0)
标签:

给戈壁浇点水

支付宝扫一扫打赏

微信扫一扫打赏