-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathtabletemplate.html
More file actions
155 lines (145 loc) · 9.57 KB
/
tabletemplate.html
File metadata and controls
155 lines (145 loc) · 9.57 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>表格模板示例</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<link rel="shortcut icon" href="assets/img/favicon.ico" />
<!-- Loading Bootstrap -->
<link href="assets/css/backend.min.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
<!--[if lt IE 9]>
<script src="assets/js/html5shiv.js"></script>
<script src="assets/js/respond.min.js"></script>
<![endif]-->
<script type="text/javascript">
var require = {
"config": {
"site": {
"name": "FastAdmin",
"cdnurl": "./",
"version": "1.0.0",
"timezone": "Asia/Shanghai",
"languages": {
"backend": "zh-cn",
"frontend": "zh-cn"
}
},
"upload": {
"cdnurl": "./",
"uploadurl": "data/upload.json",
"bucket": "yourbucketname",
"maxsize": "10mb",
"mimetype": "*",
"multipart": {
"policy": "eyJidWNrZXQiOiJ5b3VyYnVja2V0bmFtZSIsInNhdmUta2V5IjoiXC91cGxvYWRzXC97eWVhcn17bW9ufXtkYXl9XC97ZmlsZW1kNX17LnN1ZmZpeH0iLCJleHBpcmF0aW9uIjoxNTAwNTI2NTczLCJub3RpZnktdXJsIjoiaHR0cDpcL1wvd3d3LnlvdXJzaXRlLmNvbVwvdXB5dW5cL25vdGlmeSJ9",
"signature": "043eaf09c0319b1a9a11d06511bfdc4e",
"bucket": "yourbucketname",
"save-key": "/uploads/{year}{mon}{day}/{filemd5}{.suffix}",
"expiration": 1500526573,
"notify-url": "http://www.yoursite.com/upyun/notify"
},
"multiple": false
},
"modulename": "admin",
"controllername": "tabletemplate",
"actionname": "index",
"jsname": "backend/example/tabletemplate",
"moduleurl": "./",
"language": "zh-cn",
"referer": null
}
};
</script>
</head>
<body class="inside-header inside-aside ">
<div id="main" role="main">
<div class="tab-content tab-addtabs">
<div id="content">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<section class="content-header hide">
<h1>
控制台 <small>Control panel</small>
</h1>
</section>
<!-- RIBBON -->
<div id="ribbon">
<ol class="breadcrumb pull-left">
<li><a href="dashboard" class="addtabsit"><i class="fa fa-dashboard"></i> 控制台</a></li>
</ol>
<ol class="breadcrumb pull-right">
<li><a href="javascript:;" data-url="example">示例管理</a></li>
<li><a href="javascript:;" data-url="example/tabletemplate">表格模板示例</a></li>
</ol>
</div>
<!-- END RIBBON -->
<div class="content">
<div class="panel panel-default panel-intro">
<div class="panel-body">
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="one">
<div class="widget-body no-padding">
<div id="toolbar" class="toolbar">
<a href="javascript:;" class="btn btn-primary btn-refresh" ><i class="fa fa-refresh"></i> </a> <a href="javascript:;" class="btn btn-danger btn-del btn-disabled disabled" ><i class="fa fa-trash"></i> 删除</a> <a class="btn btn-info btn-disabled disabled btn-selected" href="javascript:;"><i class="fa fa-leaf"></i> 获取选中项</a>
<a class="btn btn-success btn-toggle-view" href="javascript:;"><i class="fa fa-leaf"></i> 切换视图</a>
</div>
<table id="table" class="table table-striped table-hover" width="100%">
</table>
</div>
</div>
</div>
</div>
</div>
<style type="text/css">
.example {
height:100%;position: relative;
}
.example > span {
position:absolute;left:15px;top:15px;
}
</style>
<script id="itemtpl" type="text/html">
<!--
如果启用了templateView,默认调用的是itemtpl这个模板，可以通过设置templateFormatter来修改
在当前模板中可以使用三个变量(item:行数据,i:当前第几行,data:所有的行数据)
此模板引擎使用的是art-template的native,可参考官方文档
-->
<div class="col-sm-4 col-md-3">
<!--下面四行是为了展示随机图片和标签，可移除-->
<% var imagearr = ['https://ws2.sinaimg.cn/large/006tNc79gy1fgphwokqt9j30dw0990tb.jpg', 'https://ws2.sinaimg.cn/large/006tNc79gy1fgphwt8nq8j30e609f3z4.jpg', 'https://ws1.sinaimg.cn/large/006tNc79gy1fgphwn44hvj30go0b5myb.jpg', 'https://ws1.sinaimg.cn/large/006tNc79gy1fgphwnl37mj30dw09agmg.jpg', 'https://ws3.sinaimg.cn/large/006tNc79gy1fgphwqsvh6j30go0b576c.jpg']; %>
<% var image = imagearr[item.id % 5]; %>
<% var labelarr = ['primary', 'success', 'info', 'danger', 'warning']; %>
<% var label = labelarr[item.id % 5]; %>
<div class="thumbnail example">
<span class="btn btn-<%=label%>">ID:<%=item.id%></span>
<img src="<%=image%>" class="img-responsive" alt="<%=item.title%>">
<div class="caption">
<h4><%=item.title?item.title:'无'%></h4>
<p class="text-muted">操作者IP:<%=item.ip%></p>
<p class="text-muted">操作时间:<%=Moment(item.createtime*1000).format("YYYY-MM-DD HH:mm:ss")%></p>
<p>
<!--详情的事件需要在JS中手动绑定-->
<a href="#" class="btn btn-primary btn-success btn-detail" data-id="<%=item.id%>"><i class="fa fa-camera"></i> 详情</a>
<!--如果需要响应编辑或删除事件，可以给元素添加 btn-edit或btn-del的类和data-id这个属性值-->
<a href="#" class="btn btn-primary btn-edit" data-id="<%=item.id%>"><i class="fa fa-pencil"></i> 编辑</a>
<a href="#" class="btn btn-danger btn-del" data-id="<%=item.id%>"><i class="fa fa-times"></i> 删除</a>
<span class="pull-right" style="margin-top:10px;">
<!--如果需要多选操作，请确保有下面的checkbox元素存在,可移除-->
<input name="checkbox" data-id="<%=item.id%>" type="checkbox" />
</span>
</p>
</div>
</div>
</div>
</script>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="assets/js/require.min.js" data-main="assets/js/require-backend.min.js"></script>
</body>
</html>