vue easy ui DataGrid CheckBox 全选事件

最新推荐文章于 2024-08-08 08:27:18 发布

东边的小山

最新推荐文章于 2024-08-08 08:27:18 发布

阅读量891

点赞数

分类专栏： easyUI vue

本文链接：https://blog.csdn.net/yelin042/article/details/107235274

版权

vue 同时被 2 个专栏收录

103 篇文章 5 订阅

订阅专栏

easyUI

75 篇文章 2 订阅

订阅专栏


            <DataGrid
                        ref="dg"
                        :data="locations"
                        :pagination="true"
                        :total="total"
                        :pageSize="pageSize"
                        :pagePosition="pagePosition"
                        :clickToEdit="false"
                        :dblclickToEdit="true"
                        selectionMode="row"
                        editMode="row"
                        @editEnd="onEditEnd($event)"
                        @cellClick="onCellClick($event)"
                        style="margin-top:5px"
                    >
                        <GridColumn field="ck" :width="50" align="center">
                            <template slot="header" slot-scope="scope">
                                <CheckBox v-model="allChecked" @checkedChange="onAllCheckedChange($event)"></CheckBox>
                            </template>
                            <template slot="body" slot-scope="scope">
                                <CheckBox v-model="scope.row.selected"
                                          @checkedChange="onCheckedChange($event)"></CheckBox>
                            </template>
                        </GridColumn>
                        <GridColumn field="zone" title="Zone" :editable="true"/>
                        <GridColumn field="latitude" title="Latitude" :editable="true">
                            <template slot="edit" slot-scope="scope">
                                <NumberBox v-model="scope.row.latitude" :precision="7"></NumberBox>
                            </template>
                        </GridColumn>
                        <GridColumn field="longitude" title="Longitude" :editable="true">
                            <template slot="edit" slot-scope="scope">
                                <NumberBox v-model="scope.row.longitude" :precision="7"></NumberBox>
                            </template>
                        </GridColumn>
                        <GridColumn field="version" title="Version" :editable="false">
                            <template slot="edit" slot-scope="scope">
                                <NumberBox v-model="scope.row.version" :precision="0"></NumberBox>
                            </template>
                        </GridColumn>
                    </DataGrid>
                    <Panel :bodyStyle="{padding:'20px'}">
                        <template slot="footer">
                            <Pagination :total="total" :pageSize="pageSize" :pageNumber="pageNumber"
                                        @pageChange="onPageChange($event)"></Pagination>
                        </template>
                    </Panel>


computed: {
            checkedRows() {
                return this.locations.filter(row => row.selected);
            }
        },

methods: {

           onAllCheckedChange(checked) {
                if (this.rowClicked) {
                    return;
                }
                this.locations = this.locations.map(row => {
                    return Object.assign({}, row, {
                        selected: checked
                    });
                });
            },
            onCheckedChange(checked) {
                this.allChecked = this.checkedRows.length === this.locations.length;
                this.rowClicked = true;
                this.$nextTick(() => (this.rowClicked = false));
            },
}

const _T = 100;
 
var mixin = {
	data () {
		return {
			cellFocused:false
		}
	},
  methods: {
		beginEditingRow(gr, item, fend) {
			var col = item.column;
			if(col && col.editable == false) {
				gr.endEdit();
				return;
			}
			this.editing = true;
			var vm = this;
			var elem;
			if(item.element) {
				elem = $(item.element);
			} else {
				var rindex = gr.getRowIndex(item.row);
				elem = $($(gr.$el).find('tr.datagrid-row')[rindex]);
			}
			setTimeout(function() {
				elem.find('.datagrid-editable input').on('blur', function() {
					vm.cellFocused = false;
					setTimeout(function(){
						if(!vm.cellFocused)
							if(fend == undefined || fend() == true) {
								vm.validateRow(item.row, function(){
									gr.endEdit();
								});
							}
					}, _T);
				}).focus(function(){
					vm.cellFocused = true;
				});
			}, _T);
		},
		appendNewRow(gr, obj, editing) {
			var list = gr.data;
			list.push(obj);
			if(editing) {
				setTimeout(function() {
					gr.beginEdit(gr.rows[list.length - 1]);
				}, 200);
			}
		},
		deleteSelectedRows(gr) {
			if(this.hasSelectedRows(gr)) {
				this.$confirm('是否删除选中行?').then(() => {
					var list = gr.data;
					for(var i = list.length - 1;i >= 0; --i) {
						if(list[i].selected) {
							list.splice(i, 1);
						}
					}
				}).catch(() => {});
			}
		},
		hasSelectedRows(gr) {
			var list = gr.data;
			for(var i = 0;i < list.length; ++i) {
				if(list[i].selected) {
					return true
				}
			}
		}
  }
}
 
export default mixin