本身寫的js的table公共組件使用文檔

時間 2019-11-18

原文原文鏈接

<!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" />
javascript

<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>css

html

<body class="padTop53 " >html5

<div id="body">

</div>java

<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>jquery

chrome

</body>bootstrap

<div id="div_tab">
<span>qwer</span>
</div>ui

<div id="div_page_tool_bar"></div>this

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
});

$('#div_page_tool_bar').pageToolBar({
id:'div_page_tool_bar'
});

function fnEvent(e){ var aa = $(e).parent().parent().attr('rowData'); console.log(aa); } </script>  </html>

相關標籤/搜索

文件的讀寫