自己写的js的table公共组件使用文档

57 阅读 0 评论 38 点赞

我是靠谱客的博主机智板凳，最近开发中收集的这篇文章主要介绍自己写的js的table公共组件使用文档，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>


 <html lang="en"> 

<head>
<meta charset="UTF-8" />
<title>BCORE Admin Dashboard Template | Dashboard </title>
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<meta content="" name="description" />
<meta content="" name="author" />


<link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="assets/css/main.css" />
<link rel="stylesheet" href="assets/css/theme.css" />
<link rel="stylesheet" href="assets/css/MoneAdmin.css" />
<link rel="stylesheet" href="assets/plugins/Font-Awesome/css/font-awesome.css" />

<link href="assets/css/layout2.css" rel="stylesheet" />
<link href="assets/plugins/flot/examples/examples.css" rel="stylesheet" />
<link rel="stylesheet" href="assets/plugins/timeline/timeline.css" />



</head>

<body class="padTop53 " >

<script src="assets/plugins/jquery-2.0.3.min.js"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/plugins/modernizr-2.6.2-respond-1.1.0.min.js"></script>

<script type="text/javascript" src="jquery-table-workm.js"></script>

</body>

var testJson = [

//mass不写的情况下
{
name:'wenchengbin',
abiao:{
'clazz':'',
value:'aaa',
fnEventName:'',
fnEvent:function(){},
href:'#'
},
operate:'添加',
date:new Date(),
date2:new Date(),
date3:'1448445210860',
date4:'1448445210860',
image:'D:/Users/Ex-wenchengbin001/Desktop/imgTemp/user.jpg',
rdo:'这是我选中的值',
input:'aaff',
checkbox:{
name:'a',
'clazz':'',
value:'chkaa',
fnEventName:'click',
fnEvent:function(){alert()}
},
gongyong:'可以指定任意type',
select:{
texts:['10','20','30'],
'clazz':'',
fnEventName:'click',
fnEvent:function(){
alert('select');
}
},
textarea:'这是我文本域的值',
percent:'kkkjk',
other:'<button>btn</button>'
},
//写mass=false表示列想自定义所有的列可以混着指定，默认不写，代表所有的列生成的时候是一致的,写的话则是自定义的
{
name:'xuguangfei',
abiao:{
'clazz':'',
value:'',
fnEventName:'',
fnEvent:function(){},
href:''
},
operate:{
value:'删除',
fnEvent:function(_this){

console.log($(_this).parent().parent().attr('rowData'));
},
'clazz':'btn btn-primary',
fnEventName:'click',
},
date:new Date(),
date2:new Date(),
date3:'1448445210873',
date4:'1448445210873',
image:{
src:'D:/Users/Ex-wenchengbin001/Desktop/imgTemp/user.jpg',
alt:'user',
fnEvent:function(){},
'clazz':'',
fnEventName:'click'
},
rdo:'这是我选中的值',
input:{
value:'aaa',
fnEvent:function(){},
'clazz':'',
fnEventName:''
},
checkbox:{
name:'',
'clazz':'',
value:'',
fnEventName:'',
fnEvent:function(){}
},
gongyong:{
'type':'',
id:'',
name:'',
clazz:'',
value:'',
fnEventName:'',
fnEvent:function(){}
},
select:{
texts:['10','20','30'],
'clazz':'',
fnEventName:'click',
fnEvent:function(){
alert('select');
}
},
textarea:'这是我文本域的值',
percent:'40',
other:'<h3>这是html内容</h3>'
}
];

for(var i=0;i<100;i++){
var a = {
name:'wenxuwanguo'+i,
abiao:{
'clazz':'',
value:'',
fnEventName:'',
fnEvent:function(){},
href:''
},
operate:{
value:'新增',
fnEvent:function(_this){

console.log($(_this).parent().parent().attr('rowData'));
},
'clazz':'btn btn-info',
fnEventName:'click',
},
date:new Date(),
date2:new Date(),
date3:'1448445210860',
date4:'1448445210860',
image:{
src:'D:/Users/Ex-wenchengbin001/Desktop/imgTemp/user.jpg',
alt:'user',
fnEvent:function(){},
'clazz':'',
fnEventName:'click'
},
rdo:'这是我选中的值',
input:{
value:'',
fnEvent:function(){},
'clazz':'',
fnEventName:''
},
checkbox:{
name:'',
'clazz':'',
value:'',
fnEventName:'',
fnEvent:function(){}
},
gongyong:{
'type':'',
id:'',
name:'',
clazz:'',
value:'',
fnEventName:'',
fnEvent:function(){}
},
select:{
texts:['10','20','30'],
'clazz':'',
fnEventName:'click',
fnEvent:function(){
alert('select');
}
},
textarea:'这是我文本域的值',
percent:'40',
other:'<h3>这是html内容</h3><button>btn</button>'
}
testJson.push(a);
}
$('#div_tab').table({
id:'div_tab',
data:testJson,
column:
/*
* headerText 要显示的文本
* field 属性名
* type 定义这一列的内容显示的时候的类型
*/
[
{headerText:'名字',field:'name',type:'text'},
{headerText:'操作',field:'operate',type:'button','clazz':'btn btn-info',fnEventName:'click',fnEvent:function(e){console.log($(this))}},
{headerText:'时间YMDhmd',field:'date',type:'dateYMDhmss'},
{headerText:'时间YMD',field:'date2',type:'dateYMD'},
{headerText:'time的YMDhmd',field:'date3',type:'timeYMDhmss'},
{headerText:'time的YMD',field:'date4',type:'timeYMD'},
{headerText:'图片',field:'image',type:'image',url:'D:/Users/Ex-wenchengbin001/Desktop/imgTemp/trash2.png'},
{headerText:'单选框',field:'rdo',type:'radio'},
{headerText:'文本框',field:'input',type:'inputTxt',fnEventName:'click',fnEvent:function(e){alert(1);},'clazz':''},
{headerText:'多选框',field:'checkbox',type:'checkbox'},
{headerText:'下拉框',field:'select',type:'select'},
{headerText:'文本域',field:'textarea',type:'textarea'},
{headerText:'百分比',field:'percent',type:'percent'},
{headerText:'a标签',field:'abiao',type:'a'},
{headerText:'全局的input',field:'gongyong',type:'input',inputType:'checkbox'},
{headerText:'其他',field:'other',type:'html'}
],
//toolBar:false,
pageSize:10
});