Vue和jquery.dataTable结合的实例

公司表格渲染用的jqueryTable,然而我想用vue做数据绑定,通过jqueryTable做css样式。所以有了下边的故事…

首先说一下思路,发送ajax请求后台数据(数据格式是List的json串),我的目的就是写一个模板,这个模板可以根据json自动的绘制table并进行渲染。当然了大佬们都不建议jquery和vue一起用,所以…这篇文章很low
首先附上完成代码,具体请看注释

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
		<title></title>
	</head>
	<body>
		<div id="vueTable">
			<table>
				<thead is="dis-thead" :title="title"></thead>
				<tbody>
					<tr is="dis-content" :subject="subject" v-for="(subject,index) in subjects" :key="index"></tr>
				</tbody>
			</table>
		</div>
		
		<script type="text/javascript">
			//尝试用vue组件技术动态生成表格
			//表头
			 Vue.component('dis-thead',{
				template:'<thead><tr><th><input type="checkbox" name="selectedId" id="selectedId" onClick="selectAll(checked)" /></th><th v-for="i in title" :key="i" οnclick="changeColor(this)">{{i}}</th><tr></thead>',
				props:['title']
			}); 
			//表格体
			 Vue.component('dis-content',{
				template:'<tr><td v-for="(value,name,index) in subject" :key="index"><template v-if="name===\'id\'"><input name="deleteIds" οnclick="IsSelectAll()" type="checkbox" :id="value"></template><template v-else>{{value}}</template></td></tr>',
				props:['subject']
			}); 
			var vueTable=new Vue({
				el:'#vueTable',
				data:{
					subjects:[
						{id:1,ip:"192.168.53.1",mac:"6e:3c:4n:8e:6a:ff",interface:"1"},
						{id:2,ip:"192.168.53.9",mac:"6e:3c:4n:8e:6a:ff",interface:"2"},
						{id:3,ip:"192.168.53.31",mac:"6e:3c:4n:8e:6a:ff",interface:"3"},
						{id:4,ip:"192.168.53.55",mac:"6e:3c:4n:8e:6a:ff",interface:"4"},
						{id:5,ip:"192.168.53.61",mac:"6e:3c:4n:8e:6a:ff",interface:"5"},
						{id:6,ip:"192.168.53.59",mac:"6e:3c:4n:8e:6a:ff",interface:"6"}
					]
				},
				computed:{
					 title:function(){
						var a=[];
						if(this.subjects.length!=0){
							var objects=this.subjects[0];
							a= Object.keys(objects) ;
							a.shift();
						}
					return a;
					}, 
				}
			})
		</script>
	</body>
</html>

在vue组件中我给标签加了一些响应函数,这些函数无关紧要,我就不写在这了。

代码解析和注意事项:

  1. 一个vue组件dis-thead是表头
  2. 一个vue组件dis-content是表格主体
  3. subjects属性代表的是后台传过来的json串
  4. title是根据subjects提取的属性名称集合(用的时候建议自己写一个数组把,因为如果你的数据为空,那么…你就没有表头了,这很尴尬)
  5. 关于vue的对象数组赋值问题,方法很多,我是这么干的vueTable.subjects = Object.assign([], [], data.queryList);
    data.queryList就是后台传过来的东西。

数据绑定到这就搞定了!!!

JqueryDataTable的页面渲染部分

这个问题我只是搞定了,但是…我感觉不是最优解,如果有大佬请多多指教,
demo的实验我是在原jquery页面改造的。
所以vue代码我写在了$(function(){....})块中,我也不知道它叫啥姑且叫jquery加载块。
问题来了ajax页面加载函数和$('#table_id').DataTable的渲染函数(这个函数是jqueryDataTable插件的函数,如果你不懂请另行百度)放在一个jquery加载块里加载异常。解决方案是:
拆开一个$(function(){....})块做ajax请求数据绑定,一个$(function(){…})`块搞jqueryTable数据渲染,大概是这个样子,因为刚碰vue没找到该用啥来替代这个jquery加载块,所以请各路大神指教!

相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页