table 订阅
Table是一个数据库控件, [1]  主要用于在web页面上创建表格,其功能与HtmlTable类似。不同的是,Table控件可以用动态的内容以编程的方式来生成表格。 展开全文
Table是一个数据库控件, [1]  主要用于在web页面上创建表格,其功能与HtmlTable类似。不同的是,Table控件可以用动态的内容以编程的方式来生成表格。
信息
外文名
table
中文名
工作台
table基本信息
〈table〉...〈/table〉 - 定义表格〈th〉 - 定义表头 Defines a table header〈tr〉 - 定义表行 Defines a table row〈td〉 - 定义表元(表格的具体数据) td stands for "table data," Defines a table cell.〈table border〉〈/tr〉〈/table〉〈table〉〈/tr〉〈/table〉
收起全文
精华内容
下载资源
问答
  • Lua table之增删table.insert和table.remove

    万次阅读 2018-11-15 21:53:30
    在使用Lua进行开发的过程中,对table的处理是很频繁的,这里整理一下table.insert和table.remove这两个函数的使用方法以及一些在使用过程中需要注意的地方! table.insert(list, [pos, ]value) 在表list中的pos...

    在使用 Lua 进行开发的过程中,对 table 的处理是很频繁的,这里整理一下 table.inserttable.remove 这两个函数的使用方法以及一些在使用过程中需要注意的地方!

    table.insert(list, [pos, ]value)

    在表 list 中的 pos 位置插入元素 value,并将原来在 pos 位置以及在 pos 位置后面的元素往后移。pos 为可选参数,默认值是 #list+1,所以 table.insert(list, value) 会将元素 value 插入到表 list 的末尾处!

    local tbl = {1, 2, 3, 4, 5}
    
    table.insert(tbl, 3, 666)
    print(unpack(tbl))
    -- 1   2   666 3   4   5
    
    table.insert(tbl, 999)
    print(unpack(tbl))
    -- 1   2   666 3   4   5   999

    table.remove(list[, pos])

    移除表 listpos 位置的元素,并将原来在 pos 位置后面的元素往前移(如果有必要),返回这个被移除的值。pos 为可选参数,默认值是 #list,所以 table.remove(list) 会移除表 list 中的最后一个元素!

    local tbl = {1, 2, 3, 4, 5}
    
    local ele = table.remove(tbl, 4)
    print(ele)
    print(unpack(tbl))
    -- 4
    -- 1   2   3   5
    
    ele = table.remove(tbl)
    print(ele)
    print(unpack(tbl))
    -- 5
    -- 1   2   3

    特别注意:在 for 循环中进行删除操作的时候,应该从后往前倒序遍历,如果从前往后顺序遍历的话有可能会漏掉一些项!

    local tbl = {1, 2, 2, 3, 4, 5}
    -- 顺序遍历:在移除pos为2的元素之后,pos为3以及后面的元素前移导致漏删
    for k, v in pairs(tbl) do
        if v == 2 then
            table.remove(tbl, k)
        end
    end
    print(unpack(tbl))
    -- 1   2   3   4   5
    
    tbl = {1, 2, 2, 3, 4, 5}
    -- 倒序遍历:在for循环中进行删除的正确遍历方式
    for i = #tbl, 1, -1 do
        if tbl[i] == 2 then
            table.remove(tbl, i)
        end
    end
    print(unpack(tbl))
    -- 1   3   4   5

    ps

    这两个函数只适用于数组型 table 的增删!

    展开全文
  • vuejs+element UI table的常见的属性及事件

    万次阅读 多人点赞 2018-04-23 16:20:21
    一.table组件的方法,事件 查看官网 二.常用的事件,属性 (一).属性 1.多选框(type = "selection") 需要实现勾选的功能 在<el-table> 内加入<el-table-column type="selection" width="55"></...

    一.table组件的方法,事件

    查看官网

    二.常用的事件,属性

    (一).属性

    1.多选框(type = "selection") 需要实现勾选的功能

    在<el-table> 内加入<el-table-column type="selection" width="55"></el-table-column>

    2.  :data="tableData"  是table的数据绑定

    <el-table :data="tableData">
    
    export default {   
    	data() {
    		return{
    			tableData: [],
    		}
    	}
    }

    3.formatter  用来格式化内容  

    对table的值进行处理。Function(row, column, cellValue, index){}

    A.使用formatter需要注意以下几点:
      ①无论formatter出何种形式,格式化出的DOM一定都是被包含在默认的div标签内
      ②在写formatter函数时要保证有值返回,否则单元格没有内容可展示,所以if的时候别忘了else

      ③formatter函数不会作用在列属性checkbox为true的单元格上,checkbox列是组件预留的。

    B。查看小demo

    <template>
    	<el-table :data="tableData3"  ref="multipleTable">
    		<el-table-column type="selection" width="55" ></el-table-column>
    		<el-table-column type="index" label="序号" width="60"></el-table-column>
    		<el-table-column prop="sex" label="性别" width="100" :formatter="formatSex"></el-table-column>
    		<el-table-column prop="date" label="日期"></el-table-column>
    		<el-table-column prop="name" label="姓名"></el-table-column>
    		 <el-table-column prop="IsAudit"  :formatter="formatterColumn" label="审核状态" ></el-table-column>
    		<el-table-column prop="address" label="地址"></el-table-column>
    	</el-table>
    </template>
    <script>
    export default {   
    	data() {
    		return {
    	        tableData3: [{
    	        	id:'1',
    				date: '2016-05-03',
    				name: '王小虎',
    				address: '上海市普陀区金沙江路 1518 弄',
    				IsAudit:0,
    				sex:'1'
    	        }, {
    	        	id:'2',
    				date: '2016-05-02',
    				name: '王小虎',
    				address: '上海市普陀区金沙江路 1518 弄',
    				IsAudit:1,
    				sex:'0'
    	        }, {
    	        	id:'3',
    				date: '2016-05-02',
    				name: '王小虎',
    				address: '上海市普陀区金沙江路 1518 弄',
    				IsAudit:10,
    				sex:'-1'
    	        }]
    	    }
    	},
    	mounted() {
    	},
    	methods: {
    		formatSex: function (row, column, cellValue, index) {
    			return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
    		},
    		//状态改成汉字
            formatterColumn(row, column) {
                switch(row.IsAudit){
                    case 0:
    	                return '未通过';
    	                break;
                    case 1:
    	                return '审核通过';
    	                break;
                    case 10:
    	                return '待审核';
    	                break;
                    case 9:
    	                return '草稿';
    	                break;
                    default:
                    	return '未知';
                }
            }
        }
    }
    </script>

    4.给table 的字段 设置相应的颜色

    <el-table-column label="第三方扎帐" >
                  <template slot-scope="{row}">
                      <span style="color:red;" v-if="row.status ==2"  @click="handleModifyStatus(row)">短款-700.00/3笔</span>
                      <span style="color: #1890ff;" v-else-if="row.status == 3"  @click="handleModifyStatus(row)"> 长款+100.00/1笔</span>
                      <span v-else>一致</span>
                  </template>
                </el-table-column>

    5.selectable (row, index)  是否可以选中

    注意:仅对 type=selection 的列有效,类型为 Function,Function 的返回值用来决定这一行的 CheckBox 是否可以勾选

    使用:

    <template>
    	<el-table :data="tableData3"  ref="multipleTable" @row-click="handleCurrentChange">
    		<el-table-column type="selection" width="55"  :selectable="selectable"></el-table-column>
    	</el-table>
    </template>
    <script>
    export default {   
    	methods: {
            selectable(row, index){
            	if(index === 1){
            		return true;
            	}else{
            		return false;
            	}
            }
        }
    }
    </script>

    只有第二条是可以选中 其他不能

    6.element table 禁止拖动

    只需要添加个el-table-column 上添加 :resizable="false"

    (二).方法

    1.row-click  点击行事件

    <el-table   @row-click="handleRowChange">

    handleRowChange(row, event, column){  row此行的数据      }

    2.selection-change  获取选中的所有值

    <el-table   @selection-change="selectionRowsChange">

    selectionRowsChange(val){ val  选中的值}

    三.实例

    1.Element-ui 中table 默认选中 toggleRowSelection

    2.简单的增删改

    1.table tr 点击 复选框选中  再次点击 复选框取消选中

    ①设置一个全局函数

    exports.install = function (Vue, options) {  
        //删除数组 指定的元素  
        Vue.prototype.removeByValue=function(arr, val){  
            for(var i=0; i<arr.length; i++) {  
                if(arr[i] == val) {  
                    arr.splice(i, 1);  
                    break;  
                }  
            }  
        };  
    };  

    ②tableUser.vue

    <!--用户名 增删改 基本操作-->
    <template>
    	<section>
    		<!--工具条-->
    		<el-col :span="24" class="el-table_headtoolbar" style="padding-bottom: 0px;">
    			<el-form :inline="true" :model="filters" class="userform" label-width="50px">
    				<el-form-item label="姓名"  prop="name">
    					<el-input v-model="filters.name" placeholder="姓名"  prefix-icon="el-icon-search"></el-input>
    				</el-form-item>
    				<el-form-item label="性别" prop="sex">
    					<el-select v-model="filters.sex" filterable placeholder="请选择" prop="sex">
    					    <el-option v-for="item in sexOptions" :key="item.value"  :label="item.label" :value="item.value">
    					    </el-option>
    					</el-select>
    				</el-form-item>
    				<el-dropdown split-button type="primary" @click="btnSearch" trigger="click">
    				  	检索
    					<el-dropdown-menu slot="dropdown" class="lyzbtn-group" trigger="click">
    						<el-dropdown-item @click.native="btnReset">重置</el-dropdown-item>
    					</el-dropdown-menu>
    				</el-dropdown>
    				<el-dropdown split-button type="primary" @click="btnNew" trigger="click">
    				  	新增
    					<el-dropdown-menu slot="dropdown" trigger="click">
    						<el-dropdown-item  @click.native="btnEdit">编辑</el-dropdown-item>
    						<el-dropdown-item  @click.native="btnDelete">删除</el-dropdown-item>
    					</el-dropdown-menu>
    				</el-dropdown>
    			</el-form>
    		</el-col>
    		<!--列表-->
    		<el-table :data="users.slice((page-1)*pagesize,page*pagesize)"  highlight-current-row v-loading="listLoading"  style="width: 100%;"  @selection-change="selsUserChange" class="userTableJs" @row-click="handleRowChange"  ref="table">
    			<el-table-column type="selection" width="55">
    			</el-table-column>
    			<el-table-column type="index" label="序号" width="60">
    			</el-table-column>
    			<el-table-column prop="name" label="姓名" width="120">
    			</el-table-column>
    			<el-table-column prop="sex" label="性别" width="100" :formatter="formatSex">
    			</el-table-column>
    			<el-table-column prop="age" label="年龄" width="100" >
    			</el-table-column>
    			<el-table-column prop="birth" label="生日" width="120">
    			</el-table-column>
    			<el-table-column prop="addr" label="地址" min-width="180">
    			</el-table-column>
    		</el-table>
    		<!--工具条-->
    		<el-col :span="24" class="el-table_footertoolbar">
    			<el-pagination layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 50, 100]" :page-size="pagesize" :total="users.length" style="float:right;">
    			</el-pagination>
    		</el-col>
    		<!--新增界面-->
    		<el-dialog title="新增" :visible.sync="addFormVisible">
    			<el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
    				<el-form-item label="姓名" prop="name">
    					<el-input v-model="addForm.name" auto-complete="off"></el-input>
    				</el-form-item>
    				<el-form-item label="性别">
    					<el-radio-group v-model="addForm.sex">
    						<el-radio class="radio" :label="1">男</el-radio>
    						<el-radio class="radio" :label="0">女</el-radio>
    					</el-radio-group>
    				</el-form-item>
    				<el-form-item label="年龄">
    					<el-input-number v-model="addForm.age" :min="0" :max="200"></el-input-number>
    				</el-form-item>
    				<el-form-item label="生日">
    					<el-date-picker type="date" placeholder="选择日期" v-model="addForm.birth"></el-date-picker>
    				</el-form-item>
    				<el-form-item label="地址">
    					<el-input type="textarea" v-model="addForm.addr"></el-input>
    				</el-form-item>
    			</el-form>
    			<div slot="footer" class="dialog-footer">
    				<el-button @click.native="addFormVisible = false">取消</el-button>
    				<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
    			</div>
    		</el-dialog>
    		<!--编辑界面-->
    		<el-dialog title="编辑" :visible.sync="editFormVisible">
    			<el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
    				<el-form-item label="姓名" prop="name">
    					<el-input v-model="editForm.name" auto-complete="off"></el-input>
    				</el-form-item>
    				<el-form-item label="性别">
    					<el-radio-group v-model="editForm.sex">
    						<el-radio class="radio" :label="1">男</el-radio>
    						<el-radio class="radio" :label="0">女</el-radio>
    					</el-radio-group>
    				</el-form-item>
    				<el-form-item label="年龄">
    					<el-input-number v-model="editForm.age" :min="0" :max="200"></el-input-number>
    				</el-form-item>
    				<el-form-item label="生日">
    					<el-date-picker type="date" placeholder="选择日期" v-model="editForm.birth"></el-date-picker>
    				</el-form-item>
    				<el-form-item label="地址">
    					<el-input type="textarea" v-model="editForm.addr"></el-input>
    				</el-form-item>
    			</el-form>
    			<div slot="footer" class="dialog-footer">
    				<el-button @click.native="editFormVisible = false">取消</el-button>
    				<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
    			</div>
    		</el-dialog>
        </section>
    </template>
    <script>
    import util from '@/utils/index'//日期的操作
    import { getUserListPage,batchRemoveUser,addUser,editUser} from '@/assets/api/api';//接口
    export default {
    	data() {
    		return {
    			filters: {
    				name: ''
    			},
    			//性别
    			sexOptions:[
    				{value: '1',label: '男'}, 
    				{value: '0',label: '女'}
    			],
    			users: [],//表格数据 
    			page: 1,//当前页数
    			pagesize:10,//一页显示几条
    			listLoading: false,
    			sels: [],//列表选中列
    			total: 0,
    			editFormVisible: false,//编辑界面是否显示
    			editLoading: false,
    			editFormRules: {
    				name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
    				birth: [{ type: 'date', required: true, message: '日期必须填写', trigger: 'change' }]
    			},
    			//编辑界面数据
    			editForm: {
    				id:undefined,
    				name: '',
    				sex:-1,
    				age: 0,
    				birth:new Date(),
    				addr: ''
    			},
    
    			addFormVisible: false,//新增界面是否显示
    			addLoading: false,
    			addFormRules: {
    				name: [{ required: true, message: '请输入姓名', trigger: 'blur' },],
    				birth: [{ type: 'date', required: true, message: '日期必须填写', trigger: 'change' }]
    			},
    			//新增界面数据
    			addForm: {
    				name: '',
    				sex: -1,
    				age: 0,
    				birth: new Date(),
    				addr: ''
    			},
    			arrID:[],
    
    		}
    	},
    	methods: {
    		//性别显示转换
    		formatSex: function (row, column) {
    			return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
    		},
    		//初始页page、初始每页数据数pagesize和数据data
    		handleSizeChange(size){
    	        this.pagesize = size;
    	    },
    		handleCurrentChange(val) {
    			this.page = val;
    			this.getUsers();
    		},
    		handleRowChange(row, event, column){
    			var same=false;
                if(this.arrID.length > 0){
    				for(var i=0; i<this.arrID.length ;i++){
    					if(this.arrID[i]==row.id){
    						same=true;
    						this.removeByValue(this.arrID, row.id);
    						break;
    					}
    				}
    				if(same==true){
    	            	this.$refs.table.toggleRowSelection(row,false);
    	            }else{
    	            	this.$refs.table.toggleRowSelection(row,true);
    	            	this.arrID.push(row.id);
    	            }
                }else{
                	this.$refs.table.toggleRowSelection(row,true);
            		this.arrID.push(row.id);
                }
    		},
    		//获取用户列表
    		getUsers() {
    			let para = {
    				page: this.page,
    				name: this.filters.name,
    				sex: this.filters.sex
    
    			};
    			this.listLoading = true;
    			getUserListPage(para).then((res) => {
    				this.users = res.data.users;
    				this.total = res.data.total;
    				this.listLoading = false;
    				
    			});
    		},
    		//检索
    		btnSearch(){
    			console.log('检索')
    			var searchParams = { name: this.filters.name, sex: this.filters.sex };
    				//searchUser(searchParams).then(data => {
    				
    				//});
    		},
    		//重置
    		btnReset(){
    			this.resetForm(".userform");
    		},
    		//新增
    		btnNew(){
    			this.addFormVisible = true;
    		},
    		//编辑
    		btnEdit(){
    			var ids = this.sels.map(item => item.id);
    			if(ids =='' || ids.length >1){
    				this.$alert('请选择一条要编辑的记录', '提示', {
    					dangerouslyUseHTMLString: true
    				});
    			}else{
    				const obj={};
    				obj.id=this.sels.map(item => item.id).toString();
    				obj.name=this.sels.map(item => item.name).toString();
    				console.log(this.sels.map(item => item.sex).toString())
    				if(this.sels.map(item => item.sex).toString() == 1){
    					obj.sex=1;
    				}else if(this.sels.map(item => item.sex).toString() == 0){
    					obj.sex=0;
    				}else{
    					obj.sex=-1;
    				}
    				obj.age=this.sels.map(item => item.age).toString();
    				obj.birth=this.sels.map(item => item.birth).toString();
    				obj.addr=this.sels.map(item => item.addr).toString();
    				this.editFormVisible = true;
    				this.editForm = Object.assign({},obj);
    			}
    
    		},
    		//删除
    		btnDelete(){
    			var ids = this.sels.map(item => item.id).toString();
    			if(ids ==''){
    				this.$alert('请选择要删除的记录', '提示', {
    					dangerouslyUseHTMLString: true
    				});
    			}else{
    				this.$confirm('确认删除选中记录吗?', '提示', {
    					type: 'warning'
    				}).then(() => {
    					this.listLoading = true;
    					//NProgress.start();
    					let para = { ids: ids };
    					batchRemoveUser(para).then((res) => {
    						this.listLoading = false;
    						//NProgress.done();
    						this.$message({
    							message: '删除成功',
    							type: 'success'
    						});
    						this.getUsers();
    					});
    				}).catch(() => {
    
    				});
    			}
    		},
    		//编辑
    		editSubmit: function () {
    			this.$refs.editForm.validate((valid) => {
    				if (valid) {
    					this.$confirm('确认提交吗?', '提示', {}).then(() => {
    						this.editLoading = true;
    						//NProgress.start();
    						let para = Object.assign({}, this.editForm);
    						para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
    						editUser(para).then((res) => {
    							this.editLoading = false;
    							//NProgress.done();
    							this.$message({
    								message: '提交成功',
    								type: 'success'
    							});
    							this.$refs['editForm'].resetFields();
    							this.editFormVisible = false;
    							this.getUsers();
    						});
    					});
    				}
    			});
    		},
    		//新增
    		addSubmit: function () {
    			this.$refs.addForm.validate((valid) => {
    				if (valid) {
    					this.$confirm('确认提交吗?', '提示', {}).then(() => {
    						this.addLoading = true;
    						//NProgress.start();
    						let para = Object.assign({}, this.addForm);
    						para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
    						addUser(para).then((res) => {
    							this.addLoading = false;
    							//NProgress.done();
    							this.$message({
    								message: '提交成功',
    								type: 'success'
    							});
    							this.$refs['addForm'].resetFields();
    							this.addFormVisible = false;
    							this.getUsers();
    						});
    					});
    				}
    			});
    		},
    		selsUserChange(sels) {
    			this.sels = sels;
    			if(sels.length>0){
    				var valId=[];
    	        	for(var i=0;i<sels.length;i++){
    	        		var arrIDsame=false;
    	        		valId.push(sels[i].id);
    	        	}
    	        	this.arrID=valId;
    			}
    		}
    	},
    	mounted() {
    		this.getUsers();
    		
    	}
    }
    </script>

    3.table行内编辑

    vue slot的scope传递,要表述的意思组件中slot这个插槽上可以赋值各种属性,在调用组件的页面中可以使用<template slot-scope="props"> 来获取插槽上的属性值,获取到的值是一个对象。

    (1).一行一行编辑

    <template>
    	<el-table :data="tableData" style="width: 100%">
    	    <el-table-column label="日期" width="180">
    			<template slot-scope="scope">
    		        <span>{{scope.row.date}}</span>
    		    </template>
    	    </el-table-column>
    	    <el-table-column prop="name" label="姓名">
    			<template slot-scope="scope">
    	          	<span>{{scope.row.name}}</span>
    	        </template>
    		</el-table-column>
    	    <el-table-column prop="address" label="地址">
    			<template slot-scope="scope">
    	          	<template v-if="scope.row.edit">
    	            	<el-input class="edit-input" size="small" v-model="scope.row.address"></el-input>
    	          	</template>
    	         	<span v-else>{{ scope.row.address }}</span>
    	        </template>
    		</el-table-column>
    	    <el-table-column label="操作">
    			<template slot-scope="scope">
    				<el-button v-if="scope.row.edit" type="success" @click="confirmEdit(scope.$index, scope.row)" size="small" icon="el-icon-circle-check-outline">保存</el-button>
    				<el-button v-else type="primary" @click='scope.row.edit=!scope.row.edit' size="small" icon="el-icon-edit">编辑</el-button>
    			</template>
    	    </el-table-column>
    	</el-table>
    </template>
    
    <script>
      export default {
        data() {
          return {
            tableData: [{
            	id:'1',
    			date: '2016-05-02',
    			name: '王小虎',
    			address: '上海市普陀区金沙江路 1518 弄',
    			edit:false
            }, {
            	id:'2',
    			date: '2016-05-04',
    			name: '王小虎',
    			address: '上海市普陀区金沙江路 1517 弄',
    			edit:false
            }, {
            	id:'3',
    			date: '2016-05-01',
    			name: '王小虎',
    			address: '上海市普陀区金沙江路 1519 弄',
    			edit:false
            }, {
            	id:'4',
    			date: '2016-05-03',
    			name: '王小虎',
    			address: '上海市普陀区金沙江路 1516 弄',
    			edit:false
            }]
          }
        },
        methods: {
    		confirmEdit(index,row){
    			row.edit = false;
    			this.$message({
    				message: '该地址已经成功修改',
    				type: 'success'
    			})
    		}
        }
      }
    </script>
    

    (2).table批量编辑列字段

    <template>
    	<section>
    		<!--工具条-->
    		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
    			<el-button v-if="editOk"  type="success" @click="btnOk" size="small" icon="el-icon-circle-check-outline">保存</el-button>
    			<el-button v-else="editOk" type="primary"  @click="btnEdit" size="small" icon="el-icon-edit">编辑</el-button>
    		</el-col>
    		<el-table :data="tableData" style="width: 100%">
    		    <el-table-column label="日期" width="180">
    				<template slot-scope="scope">
    			        <span>{{scope.row.date}}</span>
    			    </template>
    		    </el-table-column>
    		    <el-table-column prop="name" label="姓名">
    				<template slot-scope="scope">
    		          	<span>{{scope.row.name}}</span>
    		        </template>
    			</el-table-column>
    		    <el-table-column prop="address" label="地址">
    				<template slot-scope="scope">
    		          	<template  v-if="editOk">
    		            	<el-input class="edit-input" size="small" v-model="scope.row.address"></el-input>
    		          	</template>
    		         	<span v-else>{{ scope.row.address }}</span>
    		        </template>
    			</el-table-column>
    		</el-table>
    	</section>
    </template>
    <script>
      export default {
        data() {
          return {
            tableData: [{
            	id:'1',
    			date: '2016-05-02',
    			name: '王小虎',
    			address: '上海市普陀区金沙江路 1518 弄',
            }, {
            	id:'2',
    			date: '2016-05-04',
    			name: '王小虎',
    			address: '上海市普陀区金沙江路 1517 弄',
            }, {
            	id:'3',
    			date: '2016-05-01',
    			name: '王小虎',
    			address: '上海市普陀区金沙江路 1519 弄',
            }, {
            	id:'4',
    			date: '2016-05-03',
    			name: '王小虎',
    			address: '上海市普陀区金沙江路 1516 弄',
            }],
            editOk:false
          }
        },
        methods: {
    		btnEdit(){
    			 this.editOk=true;
    		},
    		btnOk(){
    			this.editOk=false;
    		}
        }
      }
    </script>

    4. 合计

    <el-table
    	v-loading="loading"
    	:data="slywList"
    	show-summary
    	:summary-method="getTotal"
    >
    	<el-table-column
    		label="机构"
    		align="left"
    		prop="swjgmc"
    		width="180"
    	></el-table-column>
    	// 省略
    	<el-table-column label="操作" align="center">
    		<template slot-scope="scope">
    			<el-button
    				size="mini"
    				type="text"
    				icon="el-icon-caret-right"
    				@click="handleNextLevel(scope.row)"
    				>下一级</el-button
    			>
    		</template>
    	</el-table-column>
    </el-table>
    export default {
    	data() {
            return {
    			loading:false,
    			slywList:[]
    		}
    	},
    	created() {
            this.getList();
        },
    	    methods: {
    		//合计操作
            getTotal(param) {
                const { columns, data } = param;
                const sums = [];
                columns.forEach((column, index) => {
                    if (index === 0) {
                        sums[index] = "合计";
                        return;
                    }
                    const values = data.map((item) =>
                        Number(item[column.property])
                    );
                    if (column.label != "操作") {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            } else {
                                return prev;
                            }
                        }, 0);
                        sums[index];
                    } else {
                        sums[index] = "返回";
                    }
                });
    
                return sums;
            },
            //table 数据查询
            getList() {
    			let _this = this;
                this.loading = true;
                listSltj(this.queryParams).then((response) => {
                    this.slywList = response.rows;
                    this.loading = false;
                    this.currentParams = this.queryParams;
                            // 获取合计行最后一列对象,作为“返回”按钮
                    let backPreviousButton = document.querySelector(
                        ".el-table__footer-wrapper>table>tbody>tr>.el-table_1_column_5>div"
                    );
                    if (
                        backPreviousButton == undefined ||
                        backPreviousButton == null
                    ) {
                        backPreviousButton = document.querySelector(
                            ".el-table__footer-wrapper>table>tbody>tr>td:last-child>div"
                        );
                    }
                    if (
                        backPreviousButton == undefined ||
                        backPreviousButton == null
                    ) {
                        backPreviousButton = document.querySelector(
                            ".el-table__footer-wrapper>table>tbody>tr>td:nth-last-child(2)>div"
                        );
                    }
    
                    // "返回"元素则不进行重复添加
                    if (backPreviousButton.hasChildNodes()) {
                        return;
                    }
                    // 添加"返回"元素
                    this.$nextTick(() => {
                        // 添加图标
                        let newI = document.createElement("i");
                        newI.setAttribute("class", "el-icon-caret-left");
                        backPreviousButton.appendChild(newI);
                        // 添加文本
                        let newSpan = document.createElement("span");
                        newSpan.innerText = "返回";
                        backPreviousButton.appendChild(newSpan);
                        // 修改样式
                        backPreviousButton.style.color = "#1890ff";
                        backPreviousButton.style.fontFamily = "Arial";
                        backPreviousButton.style.fontSize = "12px";
                        backPreviousButton.style.cursor = "pointer";
                        // 添加点击事件
                        backPreviousButton.onclick = function () {
                            _this.handleReturn(_this.currentParams.parentId);
                        };
                    });
                });
            },
            // 下一级操作
            handleNextLevel(row) {
               console.log("下一级操作")
            },
            // 返回操作
            handleReturn(id) {
                console.log("返回")
             
            }
    	}
    }

    展开全文
  • Bootstrap Table API 中文版(完整翻译文档)

    万次阅读 多人点赞 2017-09-11 20:20:27
    >Bootstrap table API 中文文档(完整翻译文档) *$('#table').bootstrapTable({}); *看网上有中文版的,但有些就是字面直接译过来了,而且有的就没有翻译,那就打算自己再翻译一遍,每一条会尽 *最大可能结合尽可能...

    Bootstrap table API 中文文档(完整翻译文档)
    *$(’#table’).bootstrapTable({});
    *看网上有中文版的,但有些就是字面直接译过来了,而且有的就没有翻译,那就打算自己再翻译一遍,每一条会尽
    *最大可能结合尽可能多资料翻译,如果发现译的内容比英文多,是添加了更详细的说明,表的名称,属性,类型,
    *默认值不翻译,例如:“class”、"id"等不翻译。
    *有错请提出,会及时改正,谢谢。
    如果想转请评论留个言并注明原博 @Sclifftop https://blog.csdn.net/S_clifftop/article/details/77937356

    给我评论点赞,听到没有,臭弟弟


    • “名称”可以写在$('#table').bootstrapTable({});的大括号中,可以定义一些想要的值,如:
    $("#realTime_Table").bootstrapTable({
      	  search: true,
          pagination: false,
          pageSize: 15,
          pageList: [5, 10, 15, 20],
          showColumns: true,
          showRefresh: false,
          showToggle: true,
          locale: "zh-CN",
          striped: true
    });  
    
    • “属性”放在声明表内,如:
    <!--例子应该很好看懂Table options和Column options 所放的位置不同,随便写的,主要为了懂得如何用--!>
    
     <table id="realTime_Table" data-click-to-select="true" class="table table-bordered" data-page-size="20">
          <thead>
              <tr >
                  <th data-sortable="true" data-field="realTimeDate">日期</th>
                  <th data-sortable="true" data-field="newPlayerNum">新增用户</th>
                  <th data-sortable="true" data-field="activePlayerNum">活跃用户</th>
              </tr>
          </thead>
          <tbody>
          </tbody>
    </table>
    
    • 如果名称和属性功能类似,则任意一个地方就够了,不用重复定义,有的属性写在js里比名称写在声明表中更为简单,or vice verse(有的属性必须要写,对应的名称只是表示是否启用那个属性)


    表的各项(Table options )

    定义在 jQuery.fn.bootstrapTable.defaults 文件内

    名称属性类型默认值作用描述
    -data-toggleStringtable只要引入 jquery、bootstrap 、bootstrap-table的包,不用在js里面定义就可以使用
    默认有写data-toggle="table",data-toggle应该知道吧,常用的有"tooltip、popover等等",这边就不说了
    classesdata-classesStringtable table-hover表的class属性,如果没有自己定义,则默认有边框,并且当鼠标悬浮在那一行,背景会变为浅灰色.
    sortClassdata-sort-classStringundefined声明表格td的class名,代表此列元素的class名将被排序
    heightdata-heightNumberundefined表格的高度
    undefinedTextdata-undefined-textString - 当不写任何内容默认显示'-'
    stripeddata-stripedBooleanfalse默认false,当设为true,则每行表格的背景会显示灰白相间
    sortNamedata-sort-nameStringundefined定义哪一列的值会被排序,写data-field的自定义名,没定义默认都不排列,同下面的sortOrder结合使用,没写的话列默认递增(asc)
    sortOrderdata-sort-orderStringasc同上面的结合使用,默认递增(asc),也可设为递减(desc)
    sortStabledata-sort-stableBooleanfalse(别看错了,是sortStable,sortable在下面)默认false,设为true,则和sort部分一样,区别是:在排序过程中,如果存在相等的元素,则原来的顺序不会改变。原文还有一句:(如果你把此属性设为了true)我们将为此行添加'_position'属性
    iconsPrefixdata-icons-prefixStringglyphicon定义字体库 ('Glyphicon' or 'fa' for FontAwesome),使用"fa"时需引用 FontAwesome,并且配合 icons 属性实现效果 Glyphicon 集成于Bootstrap可免费使用
    iconSizedata-icon-sizeStringundefined定义的图标大小:
          - undefined =>默认表示默认的按钮尺寸(btn)
          - xs   =>超小按钮的尺寸(btn-xs)
          - sm  =>小按钮的尺寸(btn-sm)
          - lg    =>大按钮的尺寸(btn-lg)
    buttonsClassdata-buttons-classStringdefault按钮的类,默认为default。
          - 可选的有:primary、danger、warning等等
          - 写了之后会自动转换为btn-primary(蓝色)、btn-danger(红色)、btn-warning(黄色)等格式,所以前面不要再加"btn-",默认为btn-default(白色)
          - 参考菜鸟教程:Bootstrap 按钮
    iconsdata-iconsObject{ paginationSwitchDown: 'glyphicon-collapse-down icon-chevron-down',
    paginationSwitchUp: 'glyphicon-collapse-up icon-chevron-up',
    refresh: 'glyphicon-refresh icon-refresh',
    toggle: 'glyphicon-list-alt icon-list-alt',
    columns: 'glyphicon-th icon-th',
    detailOpen: 'glyphicon-plus icon-plus',
    detailClose: 'glyphicon-minus icon-minus'
    }
    定义在工具栏、分页、详细视图中使用的图标
          - 没办法解释,请参考菜鸟教程的图标:Bootstrap 字体图标
    columns-Array[]默认空数组,在JS里面定义,field即data-field,title就是每列表头名等等。
          - 请参考:查Bootstrap-table的Usage
    data-Array[]被加载的数据。
          - 也就是从服务器获取的数据,通过"."运算符获取,例如"data.date/data.anything",后面是服务器发来的字段名
    dataFielddata-data-fieldStringrows      - 名称写自己定义的每列的字段名,也就是key,通过key才能给某行的某列赋value。
          - 原文:获取每行数据json内的key
          - 例如:{"name":"zz","age":20},name和age就是key,如果这是从服务端请求的json,那可能和每列定义的字段不同,但都是唯一的
    ajaxdata-ajaxFunctionundefined      - ajax方法,和jQuery的ajax方法类似
          - 参考 BootstrapTable实现定时刷新数据,只是参考,因为那是jQuery的ajax方法
    methoddata-methodStringget向服务器请求远程数据的方式,默认为'get',可选'post'
    urldata-urlStringundefined向服务器请求的url。
          - 例如:server + "get_app_player"和server + 'get_channel_list',两者都是向server(server是自己定义的,例如"http://kanshakan.nichousha.com/")请求数据,只是接口不同,一个是请求该游戏玩家信息,一个是请求渠道信息
    下面看看原文:
          - 向远程站点请求数据的URL
          - 请记住,如果服务端分页选项使用了自定义的,那么请求的服务器响应格式是不同的,参考下面两个数据格式:
          Without server-side pagination(没有启用服务端分页 - data1.json)
          With server-side pagination(启用服务端分页 - data2.json)
    cachedata-cacheBoolean true 默认缓存ajax请求,设为false则禁用缓存
    contentTypedata-content-typeString application/json请求数据的contentType(内容类型),用于定义文件的类型,决定接收方以什么形式读取这个文件。
          - 默认application/json,用来告诉接收端从服务器发来的消息是序列化后的json字符串
    dataTypedata-data-typeStringjson期望从服务器获取的数据的类型,默认为json格式字符串
    ajaxOptionsdata-ajax-optionsObject{}向服务器请求ajax时的附加项,默认无附加
          - 参考 jQuery.ajax()
    queryParamsdata-query-paramsFunction
    function(params){
    return params;}
    当请求数据时,你可以通过修改queryParams向服务器发送其余的参数。
          - queryParamsType="limit",它的参数包括:limit,offset,search,sort,order Else
          - params包括:pageSize,pageNumber,searchText,sortName,sortOrder
          - 当return false,请求则终止
    queryParamsTypedata-query-params-typeStringlimit默认"limit",设置该属性用来发送符合RESTful格式的参数
    responseHandlerdata-response-handlerFunction
    function(res){
    return res;}
    在加载服务器发送来的数据之前,处理数据的格式,参数res表示the response data(获取的数据)
    paginationdata-paginationBooleanfalse默认为false,表格的底部工具栏不会显示分页条(pagination toolbar),可以设为true来显示
    paginationLoopdata-pagination-loopBooleantrue默认true,分页条无限循环
    onlyInfoPaginationdata-only-info-paginationBooleanfalse前提:pagination设为true,启用了分页功能。
          - 默认false,设为true显示总记录数
    sidePaginationdata-side-paginationStringclient设置在哪进行分页,默认"client",可选"server",如果设置 "server",则必须设置url或者重写ajax方法
          - 请记住,如果服务端分页选项使用了自定义的,那么请求的服务器响应格式是不同的,参考下面两个数据格式:
          Without server-side pagination(没有启用服务端分页)
          With server-side pagination(启用服务端分页)
    pageNumberdata-page-numberNumber1前提:pagination设为true,启用了分页功能。
          - 默认第1页,用于设置初始的页数
    pageSizedata-page-sizeNumber10前提:pagination设为true,启用了分页功能。
          - 默认每页显示10条记录,用于设置每页初始显示的条数
    pageListdata-page-listArray[10, 25, 50, 100]前提:pagination设为true,启用了分页功能。
          - 默认为[10, 25, 50, 100],即可以选择"每页显示10/25/50/100条记录",用于设置选择每页显示的条数
    selectItemNamedata-select-item-nameStringbtSelectItemradio(单选按钮)或checkbox(复选框)的字段名
    smartDisplaydata-smart-displayBooleantrue默认为true,会 机智地(<_<) 根据情况显示分页(pagination)或卡片视图(card view)
    escapedata-escapeBooleanfalse 跳过插入HTML中的字符串,替换掉特殊字符(后面符号没有逗号):&,<,>,",`,'
    searchdata-searchBooleanfalse默认false不显示表格右上方搜索框 ,可设为true,在搜索框内只要输入内容即开始搜索
    searchOnEnterKeydata-search-on-enter-keyBooleanfalse默认false不启用,设为true启用,比功能是与上面相比,在搜索框内输入内容并且按下回车键才开始搜索
    strictSearchdata-strict-searchBooleanfalse设为true,开启精确搜索
    searchTextdata-search-textString""前提:search设为true,启用了搜索功能。
          - 搜索框初始显示的内容,默认空字符串
    searchTimeOutdata-search-time-outNumber500前提:search设为true,启用了搜索功能。
          - 设置搜索文件的超时时间(原文:Set timeout for search fire,不知道是写错了还是我知识面太窄,"search fire"是什么意思,官方API错了?给我整蒙逼了)
    trimOnSearchdata-trim-on-searchBooleantrue默认true,自动忽略空格
    showHeaderdata-show-headerBooleantrue默认为true显示表头,设为false隐藏
    showFooterdata-show-footerBooleanfalse默认为false隐藏表尾,设为true显示
    showColumnsdata-show-columnsBooleanfalse默认为false隐藏某列下拉菜单,设为true显示
    showRefreshdata-show-refreshBooleanfalse默认为false隐藏刷新按钮,设为true显示
    showToggledata-show-toggleBooleanfalse默认为false隐藏视图切换按钮,设为true显示

    新版的CSDN有bug,所以其余的Table options另写一个表格 [ Bootstrap Table API 中文版(完整翻译文档) ]

    名称属性类型默认值作用描述
    showPaginationSwitchdata-show-pagination-switchBooleanfalse默认为false隐藏每页数据条数选择,设为true显示
    minimumCountColumnsdata-minimum-count-columnsNumber1每列的下拉菜单最小数
    idFielddata-id-fieldStringundefined表明哪个是字段是标识字段
    uniqueIddata-unique-idStringundefined表明每行唯 一的标识符
    cardViewdata-card-viewBooleanfalse默认false,设为true显示card view(卡片视图)
    detailViewdata-detail-viewBooleanfalse默认false,设为true显示detail view(细节视图)
    detailFormatterdata-detail-formatterFunctionfunction(index, row, element){
    return '';}
    前提:detailView设为true,启用了显示detail view。
          - 用于格式化细节视图
          - 返回一个字符串,通过第三个参数element直接添加到细节视图的cell(某一格)中,其中,element为目标cell的jQuery element
    searchAligndata-search-alignStringright搜索框的位置,默认right(最右),可选left
    buttonsAligndata-buttons-alignStringright工具栏按钮的位置,默认right(最右),可选left
    toolbarAligndata-toolbar-alignStringleft自定义工具栏的位置,默认right(最右),可选left
    paginationVAligndata-pagination-v-alignStringbottom分页条垂直方向的位置,默认bottom(底部),可选top、both(顶部和底部均有分页条)
    paginationHAligndata-pagination-h-alignStringright分页条水平方向的位置,默认right(最右),可选left
    paginationDetailHAligndata-pagination-detail-h-alignStringleft如果解译的话太长,举个例子,paginationDetail就是“显示第 1 到第 8 条记录,总共 15 条记录 每页显示 8 条记录”,默认left(最左),可选right
    paginationPreTextdata-pagination-pre-textString还是举例子,如果你内容太多,底部最右边会显示:"‹ 1 2 3 4 5 ›"来选择页数,默认就是最左边那个符号,下同
    paginationNextTextdata-pagination-next-textString参考上面一条
    clickToSelectdata-click-to-selectBooleanfalse默认false不响应,设为true则当点击此行的某处时,会自动选中此行的checkbox(复选框)或radiobox(单选按钮)
    singleSelectdata-single-selectBooleanfalse默认false,设为true则允许复选框仅选择一行
    toolbardata-toolbarString | NodeundefinedjQuery的选择器,例如:#toolbar,.toolbar,或者是DOM 结点
    checkboxHeaderdata-checkbox-headerBooleantrue如果你有声明复选框,默认显示表头行的全选复选框,设为false隐藏(就是表格第一行的不显示,从第二行往后都显示)
    maintainSelecteddata-maintain-selectedBooleanfalse设为true则保持被选的那一行的状态
    sortabledata-sortableBooleantrue默认true,设为false禁用所有的行排列(也就是每列表头不会显示排序的按钮,这个需要在th声明data-sortable="true",写在js中只是启不启用)
    slientSortdata-silent-sortBooleantrue前提:sidePagination设为server(服务端)
          - 默认true,设为false则静默排序数据
    rowStyledata-row-styleFunction{}改变某行的格式,需要两个参数:
          - row:此行的数据
          - index:此行的索引
    支持classes和css,用法如下: function rowStyle(row, index){
        return { classes: 'text-nowrap another-class',
    css: {"color": "blue", "font-size": "50px"}
    }; }
    rowAttributesdata-row-attributesFunction{}改变某行的属性,需要两个参数:
          - row:此行的数据
          - index:此行的索引
    支持所有自定义的属性。
    customSearchdata-custom-searchFunction$.noop自定义搜索功能(用来代替自带的搜索功能),需要一个参数:
          - text:想要搜索的内容
    用法如下:
    function customSearch(text){
         //必须使用'this.data'对数据进行过滤(filter the data,感觉这个词也不用译),不要使用'this.options.data' }
    customSortdata-custom-sortFunction$.noop自定义排序功能(用来代替自带的排序功能),需要两个参数(可以参考前面):
          - sortName:需要排序的那列
          - sortOrder:排序方式
    用法:和上面一样,不用担心,注释也一模一样
    localedata-localeStringundefined本地化(动词)。
    本地化的文件必须被预加载,允许fallback(简单来说就是如果要使用的文件不可用,就可以用别的替代它,例如球场替补,没替补,如果有人受伤了,比赛不就废了),如果加载,将按如下顺序:
          - 首先尝试加载的是指定的"本地化"文件
          - 然后是'_'(下划线)写成'-'(破折号),并且区域代码被大写的
          - 然后是短区域代码(例如:用'fr'代替'fr-CA')
          - 最后使用的是剩下的本地化文件(当没有文件可加载则使用默认的)
    如果剩余的undefined,或者是空字符,则使用最后一次使用的那个文件(当没有本地化文件可被加载,则使用自带的'en_US')
    footerStyledata-footer-styleFunction{}改变footer格式,需要两个参数:
          - row:此行的数据
          - index:此行的索引
    支持classes和css,用法如下:
    function rowStyle(value,row, index){
        return { css: { "font-weight": "bold" } }; }

    列的各项(Column options )

    定义在 jQuery.fn.bootstrapTable.columnDefaults 文件内

    名称属性类型默认值作用描述
    radiodata-radioBooleanfalse默认false不显示radio(单选按钮),设为true则显示,radio宽度是固定的
    checkboxdata-checkboxBooleanfalse默认false不显示checkbox(复选框),设为true则显示,checkbox的每列宽度已固定
    fielddata-fieldStringundefined是每列的字段名,不是表头所显示的名字,通过这个字段名可以给其赋值,相当于key,表内唯一
    titledata-titleStringundefined这个是表头所显示的名字,不唯一,如果你喜欢,可以把所有表头都设为相同的名字
    titleTooltipdata-title-tooltipStringundefined当悬浮在某控件上,出现提示
           - 参考 Bootstrap 提示工具(Tooltip)插件
    classclass/data-classStringundefined没什么好说的,就是class
    rowspanrowspan/data-rowspanNumberundefined每格所占的行数
    colspancolspan/data-colspanNumberundefined每格所占的列数
    aligndata-alignStringundefined每格内数据的对齐方式,有:left(靠左)、right(靠右)、center(居中)
    haligndata-halignStringundefinedtable header(表头)的对齐方式,有:left(靠左)、right(靠右)、center(居中)
    faligndata-falignStringundefinedtable footer(表脚,就这样译,任性,其实随便译啦,知道就好)的对齐方式,有:left(靠左)、right(靠右)、center(居中)
    valigndata-valignStringundefined每格数据的对齐方式,有:top(靠上)、middle(居中)、bottom(靠下)
    widthdata-widthNumber(单位:px或%)undefined每列的宽度。
           - 如果没有自定义宽度,那么宽度会根据内容的宽度自适应。
           - 如果表是左适应(left responsive)或者设置的宽度小于内容的宽度,那么,宽度还是会自适应(可以在class或其他的属性中使用 min-width 或 max-width)。
           - 你也可以使用"%"作为单位,这样的话,bootstapTable将按百分比划分,如果你想使用"pixels(像素值)",你可以只写数字(只要不加"%",单位默认"px",不嫌麻烦,或者想更清晰,你也可以加上"px")
    sortabledata-sortableBooleanfalse默认false就默认显示,设为true则会被排序
    orderdata-orderStringasc默认的排序方式为"asc(升序)",也可以设为"desc(降序)"。
           - 与上面的结合使用,不然都不让排序了,你还考虑什么升降。
    visibledata-visibleBooleantrue默认为true显示该列,设为false则隐藏该列。
           - 还是很有用的,例如隐藏自定义index列,按某属性排序后会变乱,你可以读取某行的index来进行赋值
    cardVisibledata-card-visibleBooleantrue默认为true显示该列,设为false则隐藏。
    switchabledata-switchableBooleantrue默认为true显示该列,设为false则禁用列项目的选项卡。
    clickToSelectdata-click-to-selectBooleantrue默认true不响应,设为false则当点击此行的某处时,不会自动选中此行的checkbox(复选框)或radiobox(单选按钮)
    formatterdata-formatterFunctionundefined 需要此列的对象。
           某格的数据转换函数,需要三个参数:
             -value: field(字段名)
             -row:行的数据
             -index:行的(索引)index
    footerFormatterdata-footer-formatterFunctionundefined需要此列的对象。
           某格的数据转换函数,需要一个参数:
             -data: 所有行数据的数组
           函数需要返回(return)footer某格内所要显示的字符串的格式,还要包括内容
    eventsdata-eventsObjectundefined当某格使用formatter函数时,事件监听会响应,需要四个参数:
             -event:jQuery事件(参考Events)。
             - value:字段名
             - row:行数据
             - index:此行的index
    举个例子:
         <th .. data-events="operateEvent"> var operateEvents = {'click .like': function (e, value, row, index) {}};
    sorterdata-sorterFunctionundefined自定义的排序函数,实现本地排序,需要两个参数:
             - a:第一个字段名
             - b:第二个字段名
    sortNamedata-sort-nameStringundefined除了表头默认的sort-name或列的字段名,还可以使用自定义的sort-name
           对特殊情况说明:
             - 一个列显示的内容或许是"html"代码,如:<b><span style="color:red">abc</span></b>,但是被排列的是html代码中的内容(content):abc
    cellStyledata-cell-styleFunctionundefined对某格中显示样式(style)进行改变,需要三个函数:
             - value:字段名
             - row:行数据
             - index:此行的index
             - field:行的字段名
    支持classes和css,用法如下:
         function cellStyle(value, row, index, field) { return { classes: 'text-nowrap another-class', css: {"color": "blue", "font-size": "50px"} }; }
    searchable data-searchableBooleantrue默认true,表示此列数据可被查询
    searchFormatterdata-search-formatterBooleantrue默认true,可使用格式化的数据查询
    escapedata-escapeBooleanfalse 跳过插入HTML中的字符串,替换掉特殊字符(后面符号没有逗号):&,<,>,",`,'

    事件(Events)

    定义事件的格式:

    $(’#table’).bootstrapTable({
    onEventName: function (arg1, arg2, …) {
    // …
    } });

    $(’#table’).on(‘event-name.bs.table’, function (e, arg1, arg2, …) {
    // …
    });


    事件名定义在jQuery中的事件名参数作用描述
    onAllall.bs.tablename, args当所有触发器被触发时都执行此函数,就是所有的事件都会触发该事件,参数包括:
             - name:事件名
             - args:事件的数据
    onClickRowclick-row.bs.tablerow, $element, field当单击此行的任意一处,就会触发该事件,所需参数如下(只是按原文译过来的,在bootstraptable的js中不需要这些参数,因为单击该行就会获得一个row,row中包括此行所有数据,只要通过此行某列的字段名即可取出):
             - row:哪一行(从0开始)
             - $element:该行(tr)
             - field:当点击该行,你想获取此行哪一格的数据,field就是此列字段名
             - 参考:Bootstrap Table 双击或单击行获取该行内容
    onDblClickRowdbl-click-row.bs.tablerow, $element, field和上面差不多,当双击(666)此行的任意一处,就会触发该事件,所需参数如下(只是按原文译过来的,在bootstraptable的js中不需要这些参数,因为双击该行就会获得一个row,row中包括此行所有数据,只要通过此行某列的字段名即可取出):
             - row:哪一行(从0开始)
             - $element:该行(tr)
             - field:当点击该行,你想获取此行哪一格的数据,field就是此列字段名
             - 参考:Bootstrap Table 双击或单击行获取该行内容
    onClickCellclick-cell.bs.tablefield, value, row, $element当单击某一格,就会触发该事件,所需参数如下:
             - field:此格所在列的字段名
             - value:此格的数据
             - $element:此行的此列,就是此格(td)
    onDblClickCelldbl-click-cell.bs.table field, value, row, $element当双击某一格,就会触发该事件,所需参数如下:
             - field:此格所在列的字段名
             - value:此格的数据
             - $element:此行的此列,就是此格(td)
    onSortsort.bs.tablename, order当对某列进行排序时触发该事件,所需参数如下:
             - name:所排序的列的字段名
             - order:所排的顺序
    onCheckcheck.bs.tablerow, $element当选择(check)此行时触发,所需的参数如下:
             - row:所选择的行的字段名
             - $element:此行的DOM元素
    onUncheckuncheck.bs.tablerow, $element当取消选择(uncheck)此行时触发,所需的参数如下:
             - row:所取消选择的行的字段名
             - $element:此行的DOM元素
    onCheckAllcheck-all.bs.tablerows当全选行时触发,所需的参数如下:
             - rows:最近(newly)所选择的行的字段名的数组
    onUncheckAlluncheck-all.bs.tablerows当取消全选行时触发,所需的参数如下:
             - rows:之前或上次(previously)所选择的行的字段名的数组
    onCheckSome check-some.bs.tablerows当选择(check)某些行(多行,rows)时触发,所需的参数如下:
             - rows:之前或上次(previously)所选择的行的字段名的数组
    onUncheckSomeuncheck-some.bs.tablerows当取消选择(uncheck)某些行(多行,rows)时触发,所需的参数如下:
             - rows:之前或上次(previously)所选择的行的字段名的数组
    onLoadSuccess load-success.bs.tabledata当所有数据被加载时触发
    onLoadErrorload-error.bs.tablestatus, res当加载某些数据出现错误时触发
    onColumnSwitchcolumn-switch.bs.tablefield, checked当某列改变是否可见的状态时触发
    onColumnSearchcolumn-search.bs.tablefield, text当某列被查询时触发
    onPageChangepage-change.bs.tablenumber, size当改变此页所显示的数据条数或改变页码时触发
    onSearchsearch.bs.tabletext当查询此表时触发
    onToggletoggle.bs.tablecardView当改变表的视图时触发
    onPreBodypre-body.bs.tabledata当<tbody></tbody>中的内容没显示前触发
    onPostBodypost-body.bs.tabledata当<tbody></tbody>中的内容被加载完后或者在你所用的DOM中有定义则被触发
    onPostHeaderpost-header.bs.tablenone当<thead></thead>中的内容被加载完后或者在你所用的DOM中有定义则被触发
    onExpandRowexpand-row.bs.tableindex, row, $detail当查看详细视图(点击查看detail的图标)时触发
    onCollapseRowcollapse-row.bs.tableindex, row当关闭详细视图(再次点击查看detail的图标)时触发
    onRefreshOptionsrefresh-options.bs.tableoptions当刷新各项后或在初始化表(也包括销毁了再初始化)之前触发
    onResetViewreset-view.bs.table当重置(reset)表的视图时触发
    onRefresh refresh.bs.tableparams当点击刷新按钮(refresh,不是浏览器的,而是表格右上角的刷新按钮)后触发

    方法(Methods)

    定义方法响应的语法 $('#table').bootstrapTable('method', parameter);

    方法名参数描述举例
    getOptionsnone返回各项的object$table.bootstrapTable('getOptions');
          - 请查看: getOptions
    getSelectionsnone返回被选择的行,当没有行被选择,则返回空数组(但并不是undefined,也不是null,是长度为0的空数组,所以可以判断长度是否大于0来确定是否选择了行)$table.bootstrapTable('getSelections');
          - 请查看: getSelections
    getAllSelectionsnone返回所有被选的行(原文中:contain search or filter,其实就是你选择的筛选之后的数据),当没有行被选择,则返回空数组$table.bootstrapTable('getAllSelections');
          - 请查看: getAllSelections
    showAllColumnsnone显示所有的列$table.bootstrapTable('showAllColumns');
          - 就是显示所有的列,并没什么可说的
    hideAllColumnsnone隐藏所有的列$table.bootstrapTable('hideAllColumns');
          - 就是隐藏所有的列
    getDatauseCurrentPage获取被加载的表的数据,如果你设置了使用当前页的数据(useCurrentPage),则返回当前页的数据$table.bootstrapTable('getData');
          - 请查看: getData
    getRowByUniqueIdid获取你想要的某行的数据(设置某行的id)$table.bootstrapTable('getRowByUniqueId', 1);后面的1就是你要的那一行的ID
          - 请查看: getRowByUniqueId
    loaddata向表中加载数据,原来的数据将被移除$table.bootstrapTable('load', data);
          - 请查看: load

    新版的CSDN有bug,所以其余的Methods另写一个表格 [ Bootstrap Table API 中文版(完整翻译文档)]

    方法名参数描述举例
    appenddata将数据追加在最后一行后$table.bootstrapTable('append', data);data可以是数组
          - 请查看: append
    prependdata也是追加,只是在第一行之前$table.bootstrapTable('prepend', data);data可以是数组
          - 请查看: prepend
    removeparams移除一行或多行你所选的数据$table.bootstrapTable('remove', {field: 'id', values: ids});
          - id:所需移除的那一行(rows,一或多行)的字段
          - values:被移除的行的数组
          - 请查看: remove
    removeAll-移除表中所有的数据$table.bootstrapTable('removeAll');
          - 请查看: removeAll
    removeByUniqueId-移除某行数据(设置某行的id)$table.bootstrapTable('removeByUniqueId', 1);后面的1就是你想移除的那一行的ID
          - 请查看: removeByUniqueId
    insertRowparams新增一行,所需的参数如下:
          - index:你想插入到哪(只要愿意,想插哪就插哪,想插谁就插谁)
          - row:你想插入的数据
    $table.bootstrapTable('insertRow', {index: 1, row: row});
          - 请查看: insertRow
    updateRowparams更新行数据,所需的参数如下:
          - index:所要更新的行的索引(index)
          - row:你想换的新的数据
    $table.bootstrapTable('updateRow', {index: 1, row: row});
          - 请查看: updateRow
          - 请查看: Bootstrap Table实现定时刷新数据
    updateByUniqueIdparams更新某行数据,所需的参数如下:
          - id:你想更新那行的id(唯一),(只要愿意,想换哪个换哪个)
          - row:你想换的新的数据
    $table.bootstrapTable('updateByUniqueId', {id: 3, row: row});
          - 请查看: updateByUniqueId
    showRowparams显示特定行,所需的参数至少包括下面所列的一个:
          - id:所要显示的行的索引(index)
          - uniqueId:那一行的id
    $table.bootstrapTable('showRow', {index:1});
          - 请查看: showRow/hideRow
    hideRowparams隐藏特定行,所需的参数至少包括下面所列的一个:
          - id:所要隐藏的行的索引(index)
          - uniqueId:那一行的id
    $table.bootstrapTable('hideRow', {index:1});
          - 请查看: showRow/hideRow
    getRowsHiddenboolean获取隐藏的行(官方原话很多,其实总结起来就前面那一句)$table.bootstrapTable('getRowsHidden');

    新版的CSDN有bug,所以其余的Methods另写一个表格 [ Bootstrap Table API 中文版(完整翻译文档) ]

    方法名参数描述举例
    mergeCellsoptions融合~(把多格合并为一格),所需的参数如下:
          - index:所要合并的格所在行的索引(index)
          - field:所在列的字段名
          - rowspan:合并的行总数目
          - colspan:合并的列总数目
    $table.bootstrapTable('mergeCells', {index: 1, field: 'name', colspan: 2, rowspan: 3});
          - 请查看: mergeCells
    updateCellparams更新某格数据,所需的参数如下:
          - index:所要合并的格所在行的索引(index)
          - field:所在列的字段名
          - value:要换的新的数据
    你也可以设置{reinit:false}来禁用表格的再次初始化
    $table.bootstrapTable('updateCell',{index:index,field:'id',value:value});
    refreshparams刷新服务端的数据:
          - 可以设置{silent:true}来 偷偷地(<_<) 刷新
          - 设置{url:newUrl,pageNumber:pageNumber,
    pageSize:pageSize}改变请求的地址,页数,每页所显示的条数
          - 可以设置{query:{foo:'bar'}}增加特定的参数
    $table.bootstrapTable('refresh');
          - 请查看: refresh
    refreshOptionsoptions看例子吧      - 请查看: refreshOptions
    resetSearchtext重置搜索的文本(text)      - 请查看: resetSearch
    showLoadingnone显示正在加载……      - 请查看: showLoading/hideLoading
    hideLoadingnone隐藏正在加载……      - 请查看: showLoading/hideLoading
    checkAllnone选择当前页的所有行$table.bootstrapTable('checkAll');
          - 请查看: checkAll/uncheckAll
    uncheckAllnone取消选择当前页的所有行$table.bootstrapTable('uncheckAll');
          - 请查看: checkAll/uncheckAll
    checkInvertnone反向选择,不难理解吧$table.bootstrapTable('checkInvert');
    checkindex选择某一行,索引(index)从0开始$table.bootstrapTable('check', 1);
          - 请查看: check/uncheck
    uncheckindex取消选择某一行,索引(index)从0开始$table.bootstrapTable('uncheck', 1);
          - 请查看: check/uncheck
    checkByparams通过数组选择某一行,所需的参数如下:
          - field:所要选的字段名
          - values:所要选的那些值(数组)
    官方没,啊,有例纸:
    - $("#table").bootstrapTable("checkBy", { field:"field_name", values:["value1","value2","value3"]});
          - 请查看: checkBy/uncheckBy
    uncheckByparams通过数组选择某一行,所需的参数如下:
          - field:所要取消选择的字段名
          - values:所要取消选择的那些值(数组)
    $("#table").bootstrapTable("uncheckBy", { field:"field_name", values:["value1","value2","value3"]});
          - 请查看: checkBy/uncheckBy
    resetViewparams改变表格的样式,例如改变表格的高度(height) $table.bootstrapTable('resetView');
          - 请查看: resetView
    resetWidthnone自动改变表头和表脚(就译成脚,任性)的宽度来适应每列的宽度$table.bootstrapTable('resetWidth');
    destroynone销毁表格 A!T!T!A!C!K!$table.bootstrapTable('destroy');
          - 请查看: destroy
    showColumnfield显示特定的列 $table.bootstrapTable('showColumn', 'name');
          - 请查看: showColumn/hideCoulumn
    hideColumnfield隐藏特定的列 $table.bootstrapTable('hideColumn', 'name');
          - 请查看: showColumn/hideCoulumn

    新版的CSDN有bug,所以其余的Methods另写一个表格 [ Bootstrap Table API 中文版(完整翻译文档) ]

    方法名参数描述举例
    getHiddenColumns-获取所有隐藏的列$table.bootstrapTable('getHiddenColumns');
    getVisibleColumns-获取所有显示的列$table.bootstrapTable('getVisibleColumns');
    scrollTovalue滚……到哪个位置,单位是'px',如果设为'bottom',嗖,恭喜你已到表尾 $table.bootstrapTable('scrollTo', 0);
          - 请查看: scrollTo
    getScrollPositionnone获取当前所滚到的位置,单位你懂得,就是'px'$table.bootstrapTable('getScrollPosition');
    filterBynone只能在客户端(client-side,相对server-side)这边用,过滤表中的数据
    例如:
          - 可以设置{age:10}来只显示age为10的数据
          - 不仅单的,你还可以双飞,甚至多p,设置{age: 10, hairColor: ["blue", "red", "green"]} ,这样你就得到了一群10岁的,头发颜色为蓝,红,绿的……数据
    $table.bootstrapTable('filterBy', { id: [1, 2, 3] });
          - 请查看: filterBy
    selectPagepage跳转到特定的页面$table.bootstrapTable('selectPage', 1);
          - 请查看: selectPage/prevPage/nextPage
    prevPagenone跳转到上一页$table.bootstrapTable('prevPage');
          - 请查看: selectPage/prevPage/nextPage
    nextPagenone跳转到下一页$table.bootstrapTable('nextPage');
          - 请查看: selectPage/prevPage/nextPage
    togglePaginationnone词穷,请看例纸$table.bootstrapTable('togglePagination');
          - 请查看: togglePagination
    toggleViewnone改变视图$table.bootstrapTable('toggleView');
          - 请查看: toggleView
    expandRowindex可使用条件:detail view设为了true,不然无法使用视图功能,这个也没用
          - 通过参数index来展开此列的详细视图
          - 请查看: expandRow-collapseRow
    collapseRowindex可使用条件:detail view设为了true
          - 通过参数index来关闭此列的详细视图
          - 请查看: expandRow-collapseRow
    expandAllRows
    新版有更改(原来为"expandAllRow"),下同
    感谢 @zhq449681061
    is subtable可使用条件:detail view设为了true
          - 展开所有列的详细视图
    $table.bootstrapTable('expandAllRows');
          - 参考上面的实例,上面是展开(折叠)某一行的视图,这个是所有行的
    collapseAllRowsis subtable可使用条件:detail view设为了true
          - 关闭所有列的详细视图
    $table.bootstrapTable('collapseAllRows');
          - 参考上面

    本地化,切换为另一种语言(Localizations)

    默认显示英文,如果想使用中文,首先引入:

    <script src="bootstrap-table-zh-CN.js"></script>

    然后是三种声明使用的方法(个人只使用第二、三种),如下:

    • 第一种:

    $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['zh-CN']);

    • 第二种:

    <table data-toggle="table" data-locale="zh-CN"></table>

    • 第三种:

    $('table').bootstrapTable({locale:'zh-CN'});


    • 以下说明除了数字外均为中文默认显示,本来不用写的,只要引入就显示中文了,下面数字我就默认15,这个实际要看你设置的是多少
    名称参数默认说明
    formatLoadingMessage-'Loading, please wait…'“加载中,请等待……”
    formatRecordsPerPagepageNumber'%s records per page'“每页显示 15 条记录”
    formatShowingRowspageFrom, pageTo, totalRows'Showing %s to %s of %s rows'“显示第 1 到第 15 条记录”
    formatDetailPaginationtotalRows'Showing %s rows'“总共 15 条记录”
    formatSearch-'Search'“搜索”(占位符)
    formatNoMatches-'No matching records found'“没有找到匹配的记录”
    formatRefresh-'Refresh'“刷新”(鼠标悬浮显示的文字,下同)
    formatToggle-'Toggle'“切换”
    formatColumns-'Columns'“列”

    有错请留言,看到后会及时更改,如果像那种翻译的行写成列或漏字等低级错误,看英文名称就知道有没有错了,主要就是为了让你们知道怎么用,会持续检查哪有误、漏译,如果认为有译得不妥的地方,也可以留言一起讨论,谢谢


    自己做的微信小程序工具 —维尼聚合工具( 查地铁、线路规划、二维码生成、计算器、指南针、证件识别等等)

    维尼聚合工具


    其他相关:


    展开全文
  • MybatisPlus中@TableField注解的使用

    万次阅读 多人点赞 2019-09-30 14:51:29
    实现 官方文档说明: ... TableField 注解新增属性 ...(讲解:比如我们使用mybatisplus自带的insert()方法向数据库插入数据时,假设我们给age字段赋值为1,但是我们在age字段上的@TableField注解里面加了update="%s...

    实现

    官方文档说明:

    • com.baomidou.mybatisplus.annotations.TableField
      在这里插入图片描述
    • TableField 注解新增属性 update 预处理 set 字段自定义注入
      (讲解:比如我们使用mybatisplus自带的insert()方法向数据库插入数据时,假设我们给age字段赋值为1,但是我们在age字段上的@TableField注解里面加了update="%s+1",那么真真插入到数据库的值就是age=2,而不是age+1了)
    例如:@TableField(.. , update="%s+1") 其中 %s 会填充为字段
    输出 SQL 为:update 表 set 字段=字段+1 where ...
    

    如果给某个字段上@TableField注解里面写update=“now()”,那么最后我们使用mybatisplus自带的insert()方法向数据库插入数据时,这个字段插入到数据库中的值就为当前时间,看下面代码的sql语句即可明白

    例如:@TableField(.. , update="now()") 使用数据库时间
    输出 SQL 为:update 表 set 字段=now() where ...
    
    • TableField 注解新增属性 condition 预处理 WHERE 实体条件自定义运算规则,下面会有代码讲解
    @TableField(condition = SqlCondition.LIKE)
    private String name;
    输出 SQL 为:select 表 where name LIKE CONCAT('%',,'%')
    

    讲解:举个例子来说明@TableField(condition = SqlCondition.LIKE)的作用

    @Data
    @TableName("admin_role")
    public class RoleDO  extends Model<RoleDO> {
     
        /**
         * 角色ID
         */
        @TableId(type = IdType.AUTO)
        private Long id;
     
        /**
         * 角色名称
         */
        @TableField(condition = SqlCondition.LIKE)
        private String name;
     
        /**
         * 角色描述
         */
        private String description;
     
        /**
         * 是否启用:0-不可用,1-可用
         */
        private Boolean enabled;
     
        /**
         * 删除标示:0-未删除,1-已删除
         */
        @TableLogic
        private Boolean deleted;
     
        /**
         * 创建人ID
         */
        protected Long creatorId;
     
        /**
         * 创建人
         */
        protected String creator;
     
        /**
         * 创建时间
         */
        @SuppressFBWarnings("EI_EXPOSE_REP")
        protected Date dateCreated;
     
        /**
         * 修改人ID
         */
        protected Long modifierId;
     
        /**
         * 修改人
         */
        protected String modifier;
     
        /**
         * 更新时间
         */
        @SuppressFBWarnings("EI_EXPOSE_REP")
        protected Date lastModified;
     
        /** 指定主键 */
        @Override
        protected Serializable pkVal() {
            return this.id;
        }
    }
    

    我们通过直接给EntityWrapper对象传入RoleDO实体类来构造EntityWrapper,, EntityWrapper eWrapper = new EntityWrapper(roleDO); (代码如下)

    /**
         * 查询角色列表(分页)
         *
         * @param roleParam 角色参数
         * @return 查询角色分页列表
         */
        public Page<RoleDO> selectListPage(ListRoleParam roleParam) {
            RoleDO roleDO = new RoleDO();
            BeanUtils.copyProperties(roleParam, roleDO);
            Page<RoleDO> page = new Page<RoleDO>((int)roleParam.getPi(), (int)roleParam.getPs()); //得到分页的信息
            EntityWrapper<RoleDO> eWrapper = new EntityWrapper<RoleDO>(roleDO);//构建条件查询对象
            Page<RoleDO> roleDOList = roleDO.selectPage(page, eWrapper);//这里使用的就是Model提供的AR
            return roleDOList;
        }
    

    而对于name这样的字段在日常查询中往往是通过like方式来进行匹配的而非精确匹配,所以此处通过@TableField(condition = SqlCondition.LIKE)来实现动态组合查询条件,会根据前台传入的参数自动组合查询语句并进行分页。

    • 字段填充策略 FieldFill
      在这里插入图片描述
      讲解如下:

    实体类中有如下属性,通过上面的自动填充属性,我们可以实现在进行插入(insert)操作时对添加了注解@TableField(fill = FieldFill.INSERT)的字段进行自动填充(解释:后面会写配置自动填充的配置类,该配置类的作用用于配置自动填充的值)。

    对添加了注解@TableField(fill = FieldFill.INSERT_UPDATE)的字段在进行插入(insert)和更新(update)时进行自动填充。(解释:后面会写配置自动填充的配置类,该配置类的作用用于配置自动填充的值)。

     /**
         * 创建人
         */
        @TableField(fill = FieldFill.INSERT)
        private Long creatorId;
     
        /**
         * 创建时间
         */
        @TableField(fill = FieldFill.INSERT)
        private Date gmtCreat;
     
        /**
         * 修改人
         */
        @TableField(fill = FieldFill.INSERT_UPDATE)
        private Long modifierId;
     
        /**
         * 修改时间
         */
        @TableField(fill = FieldFill.INSERT_UPDATE)
        private Date gmtModified;
     
        /**
         * 是否可用
         */
        @TableField(fill = FieldFill.INSERT)
        private Boolean availableFlag;
    

    这样我们在具体业务中对实体类进行赋值就可以不用对这些公共字段进行赋值,在执行插入或者更新时就能自动赋值并插入数据库。

    那么要自动赋的值在哪里配置?
    在项目的config包下新建自动填充处理类使其实现接口MetaObjectHandler,接下来我们来写自动赋值的配置类,并重写其方法:

    package com.ws.api.config;
     
    import com.baomidou.mybatisplus.core.handlers.MetaObjectHandler;
    import org.apache.ibatis.reflection.MetaObject;
    import org.springframework.stereotype.Component;
     
    import java.util.Date;
     
    /**
     * 自动填充处理类
     * @author badao
     * @version 1.0
     * @see
     **/
    @Component
    public class MyMetaObjectHandler implements MetaObjectHandler {
     
     
        @Override    //在执行mybatisPlus的insert()时,为我们自动给某些字段填充值,这样的话,我们就不需要手动给insert()里的实体类赋值了
        public void insertFill(MetaObject metaObject) {
        //其中方法参数中第一个是前面自动填充所对应的字段,第二个是要自动填充的值。第三个是指定实体类的对象
            this.setFieldValByName("modifierId", new Long(111), metaObject);
            this.setFieldValByName("gmtModified", new Date(), metaObject);
            this.setFieldValByName("creatorId", new Long(111), metaObject);
            this.setFieldValByName("gmtCreat",new Date(), metaObject);
            this.setFieldValByName("availableFlag",true, metaObject);
          
     
        }
     
        @Override//在执行mybatisPlus的update()时,为我们自动给某些字段填充值,这样的话,我们就不需要手动给update()里的实体类赋值了
        public void updateFill(MetaObject metaObject) {
            this.setFieldValByName("modifierId", new Long(111), metaObject);
            this.setFieldValByName("gmtModified", new Date(), metaObject);
        }
    }
    

    到此,@TableField完成字段自动填充的内容就讲完了

    接下来我们来看@TableField(exist=false)的作用

    比如在实体类中有一个属性为remark,但是在数据库中没有这个字段,但是在执行插入操作时给实体类的remark属性赋值了,那么可以通过在实体类的remark属性上添加

    @TableField(exist=false)
     private String remark;
    

    就不会报错了。

    在这里插入图片描述

    接下来的一段时间,我会专注Java技术栈,计算机网络,数据结构和算法,操作系统,设计模式,计算机组成原理,数据库原理,设计模式来做分享,欢迎你们和我一起学习,一起提高,Fighting!

    本文转载自:https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/89425635

    展开全文
  • Element UI的表格table列的宽度自适应设置

    万次阅读 热门讨论 2018-03-23 16:05:22
    不要设置 width="110px" ...el-table-column prop="login_id" align="center" label="工号"> </el-table-column> <el-table-column prop="login_id" width="110px" align="center" label="工号...
  • LaTeX表格Table使用解析

    万次阅读 多人点赞 2018-09-11 21:58:34
    \begin{table}[htbp] \centering % 显示位置为中间 \caption{standard table} % 表格标题 %字母的个数对应列数,|代表分割线 % l代表左对齐,c代表居中,r代表右对齐 \begin{tabular}{|c|c|c|c|} \...
  • element关于table拖拽排序问题

    万次阅读 2019-10-29 20:31:03
    element关于table拖拽排序问题
  • @Table 注解详解

    万次阅读 多人点赞 2018-11-22 13:36:07
    spring @Table注解 作用是:声明此对象映射到数据库的数据表,通过它可以为实体指定表(talbe) 常用的两个属性: 1、name 用来命名 当前实体类 对应的数据库 表的名字 @Table(name = "tab_user") 2、...
  • 在使用mybatis generator时,出现MyBatis Generator : Table Configuration scheme.table matched more than one table问题。 原因是使用了mysql8.0以上的版本,参考官网文档...
  • ElementUI table的行高设置

    万次阅读 多人点赞 2018-07-15 20:39:04
    Q(问题):elementUI自带的table设置行高A(解决方法):修改el-table元素中cell-style属性里的padding值为0Example(示例):默认:&lt;template&gt; &lt;el-table :data="tableData" ...
  • Lua table之排序table.sort

    万次阅读 2018-11-14 23:43:27
    在Lua中,对table进行排序一般使用Lua自带的排序函数: table.sort(list[, comp]) list为需要排序的目标table,可选参数comp为排序的比较函数! 如果不提供比较函数comp,默认将使用标准Lua操作符"&lt;&...
  • HTML5 CSS控制Table内外边框、颜色、大小示例

    万次阅读 多人点赞 2017-06-11 16:46:06
    联系人:石虎 QQ:1224614774...在默认的情况下,我们的CSS将Table的边框清除掉了,下面与大家分享下CSS控制Table内外边框、颜色、大小的样式,想学习的朋友可以参考下 其实按照常理来说,现在的网站应该早已经抛弃...
  • table中嵌套多层table

    万次阅读 2017-10-06 21:45:48
    因工作业务需求,需要展示一个多层嵌套的数据结构,现整理如下,分享给需要的朋友,应用框架vue2。 初始的数据结构如下: ... el:"#table1", data:{ table1:[{ order: "ex-20171006", table2: [{ kind:
  • 使用tableExport.js直接导出web页面上的table

    万次阅读 热门讨论 2016-12-23 15:42:06
    1,需要导入两个js文件,一个tableExport.js,另一个是jquery.base64.js,前一个文件是导出数据和核心类库,后一个是为了避免导出中文时乱码的js文件,如果你导出的数据没有中文,可以不适用它。 说明:只能对table...
  • create table select from 和 insert into table select from都是用来复制表,两者的主要区别为: create table select from 要求目标表不存在,因为在插入时会自动创建。 insert into table select from 要求目标...
  • element-ui中的表格el-table滚动条样式修改

    万次阅读 多人点赞 2019-04-23 16:31:41
    /deep/ .el-table__body-wrapper::-webkit-scrollbar { width: 6px; // 横向滚动条 height: 6px; // 纵向滚动条 必写 } // 滚动条的滑块 /deep/ .el-table__body-wrapper::-webkit-scrollbar-...
  • 使用layui 渲染table数据表格

    万次阅读 热门讨论 2018-04-18 15:37:00
    先上最终效果图:1,引入layui的css和js文件&lt;link rel="stylesheet" href="lib/layui/css/layui.css"...2,在页面放置一个table元素&lt;table class="layui-hi
  • .el-table, .el-table__expanded-cell{ background-color: transparent; } /* 表格内背景颜色 */ .el-table th, .el-table tr, .el-table td { background-color: transparent; } 组件化开发 less则需要加上/deep...
  • table自适应

    万次阅读 2018-06-15 16:39:37
    自适应宽度: td { width: 1px; white-space: nowrap; /* 自适应宽度*/ word-break: keep-all; /* 避免长单词截断,保持全部 */ } ...table { table-layout: fixed; width: 100%; }...
  • bootstrap-table-demo

    千次下载 热门讨论 2015-03-25 20:03:35
    bootstrap-table是一个功能强大的table组件,支持分页、全文检索、导出等
  • Hive的hql是基于sql而来,而sql中关于表的...1.自主创业方式create table 使用create table从无到有,按照建表的格式和要求实现建表。实际开发中较常用的方式,主要可以定制化建表。 具体参考博客:https://blo...
  • ALTER TABLE 语句

    千次阅读 2019-07-04 16:11:58
    ALTER TABLE 语句用于在已有的表中添加、修改或删除列。 1 . ALTER TABLE table_name ADD column_name datatype 2. ALTER TABLE table_name DROP COLUMN column_name 3. ALTER TABLE table_name ALTER COLUMN column...
  • 页面table导出Excel——table2excel

    万次阅读 2017-06-22 15:27:43
    页面table导出Excel——table2Excel
  • TableExport数据导出插件的使用 要想实现表格数据的导出,我们可以使用bootstrap的扩展插件Table Export来实现我们的需求。 即:bootstrap-table-export.js 由于数据导出功能是BootStrapTable的功能的扩展,而且...
  • idea中@Table注解报错can not resolve table

    千次阅读 多人点赞 2020-03-17 16:47:56
    idea中@Table注解报错can not resolve table初学idea,跌跌撞撞,记录一下遇见的坑 初学idea,跌跌撞撞,记录一下遇见的坑 在idea中创建实体类使用@Table注解时,@Table(name=“user”)一直报错,提示 can not ...
  • error: 1146: Table 'a_content' doesn't exist 这种情况就是要把原来mysql安装目录data里的 ibdata1 也要拷贝过去 INNODB是MYSQL数据库一种流行的数据库引擎,支持事务(行级),在企业级应...
  • proxyTable讲解

    千次阅读 2020-04-13 21:34:45
    proxyTable讲解
  • element中表格Table,el-table序列号

    千次阅读 2019-04-26 16:35:40
    element中表格Table,使用中,如果设置了type = index发现每一页的序列号都从1开始, element的网址如下: https://element.eleme.cn/#/zh-CN/component/tableTable Attributes中发现了 具体使用如下: ...
  • 这三者,经常有很多人搞混淆,我们先看官方文档:https://dev.mysql.com/doc/refman/5.7/en/server-system-variables.html#sysvar_table_definition_cache,他们三个是连在一起的,所以有些相似的地方,但是也有不同...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,130,638
精华内容 1,252,255
关键字:

table