Skip to content

Commit e9a61ff

Browse files
author
syshex
committed
* Define a Render Function support by column
* Define Column Styles by column * Define Cell Styles by column
1 parent 7b463ae commit e9a61ff

File tree

8 files changed

+104
-22
lines changed

8 files changed

+104
-22
lines changed

‎CHANGELOG.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
# Changelog
22

3+
## 1.1.3 RC
4+
5+
* Define a Render Function support by column
6+
* Define Column Styles by column
7+
* Define Cell Styles by column
8+
39
## 1.1.2 (June 2, 2017)
410

511
* Fix to Sorting

‎README.md

Lines changed: 37 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -223,9 +223,15 @@ The `columns` array takes object of type:
223223

224224
```javascript
225225
{
226-
title:"country", // Mandatory: Title to be presented on the Table
227-
visible: true, // Optional: column visible? (Default: true)
228-
editable: false, // Optional: column cells editable? (Default: false)
226+
{
227+
title: String, // Mandatory: Title to be presented on the Table
228+
name: String, // Optional: The name of the "data" property. If nothing, title is used.
229+
visible: Boolean, // Optional: column visible? (Default: true)
230+
editable: Boolean, // Optional: column cells editable? (Default: false)
231+
columnstyle: String // Optional: styles to be applied to the Column Header
232+
cellstyle: String // Optional: styles to be applied to the Cells of this column
233+
renderfunction: Function // Optional: Function that receives as input the entry, and returns an HTML String for drawing cell
234+
}
229235
}
230236
```
231237

@@ -248,6 +254,34 @@ Column with Title "Name" , which is visible and editable:
248254
}
249255
```
250256

257+
#### Render Function Example
258+
259+
For a Column definition like so:
260+
261+
```javascript
262+
columns: [
263+
{
264+
title: "Test",
265+
visible: true,
266+
renderfunction: renderfu
267+
}
268+
],
269+
```
270+
271+
There must be a javascript function called `renderfu` :
272+
273+
```javascript
274+
<script>
275+
var renderfu = function (entry) {
276+
return '<div class="btn-group" role="group" >'+
277+
' <button type="button" class="btn btn-sm btn-primary"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></button>'+
278+
' <button type="button" class="btn btn-sm btn-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>'+
279+
'</div><span>'+JSON.stringify(entry)+'</span>';
280+
};
281+
</script>
282+
```
283+
284+
251285
### AJAX Configuration
252286

253287
Ajax Object properties:

‎dist/vue-bootstrap-table.js

Lines changed: 14 additions & 9 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vue-bootstrap-table.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vue-bootstrap-table.min.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,15 @@
88
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
99
</head>
1010
<body>
11+
<style>
12+
.colstyletest {
13+
background-color: #000066;
14+
}
15+
16+
.cellstyletest {
17+
background-color: #a94442;
18+
}
19+
</style>
1120
<div class="container-fluid">
1221
<h1>Vue Bootstrap Table</h1>
1322
<div id="app">

‎src/VueBootstrapTable.vue

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -39,18 +39,18 @@
3939
<tr>
4040
<th v-for="column in displayColsVisible" @click="sortBy($event, column.name)"
4141
track-by="$index"
42-
:class="getClasses(column.name)">
42+
:class="getClasses(column)">
4343
{{ column.title }}
4444
</th>
4545
</tr>
4646
</thead>
4747
<tbody>
4848
<tr v-for="entry in filteredValuesSorted " track-by="$index">
4949
<td v-for="column in displayColsVisible" track-by="$index"
50-
v-show="column.visible">
51-
52-
<span v-if="!column.editable"> {{ entry[column.name] }} </span>
53-
<value-field-section v-else
50+
v-show="column.visible" :class="column.cellstyle">
51+
<span v-if="column.renderfunction!==false" v-html="column.renderfunction( entry )"></span>
52+
<span v-if="column.renderfunction===false && !column.editable"> {{ entry[column.name] }} </span>
53+
<value-field-section v-if="column.renderfunction===false && column.editable"
5454
:entry="entry"
5555
:columnname="column.name"></value-field-section>
5656
</td>
@@ -549,6 +549,19 @@
549549
obj.editable = column.editable;
550550
else
551551
obj.editable = false;
552+
if ( typeof column.renderfunction !== "undefined")
553+
obj.renderfunction = column.renderfunction;
554+
else
555+
obj.renderfunction = false;
556+
if ( typeof column.columnstyle !== "undefined")
557+
obj.columnstyle = column.columnstyle;
558+
else
559+
obj.columnstyle = "";
560+
if ( typeof column.cellstyle !== "undefined")
561+
obj.cellstyle = column.cellstyle;
562+
else
563+
obj.cellstyle = "";
564+
552565
return obj;
553566
},
554567
setSortOrders: function () {
@@ -587,8 +600,9 @@
587600
this.sortChanged = this.sortChanged * -1;
588601
}
589602
},
590-
getClasses: function (key) {
591-
var classes = [];
603+
getClasses: function (column) {
604+
var classes = [column.columnstyle];
605+
var key = column.name;
592606
if (this.sortable) {
593607
classes.push("arrow");
594608
/*if (this.sortKey === key) {

‎src/app.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,13 @@ Vue.config.devtools = true;
33

44
import VueBootstrapTable from './VueBootstrapTable.vue';
55

6+
var renderfu = function (entry) {
7+
return '<div class="btn-group" role="group" >'+
8+
' <button type="button" class="btn btn-sm btn-primary"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></button>'+
9+
' <button type="button" class="btn btn-sm btn-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>'+
10+
'</div><span>'+JSON.stringify(entry)+'</span>';
11+
};
12+
613
new Vue({
714
el: '#app',
815
components: {
@@ -24,12 +31,19 @@ new Vue({
2431
{
2532
title: "Id",
2633
name: "id",
34+
columnstyle: "colstyletest",
35+
cellstyle: "cellstyletest"
2736
},
2837
{
2938
title: "Name",
3039
name: "title",
3140
visible: true,
3241
editable: true,
42+
},
43+
{
44+
title: "Test",
45+
visible: true,
46+
renderfunction: renderfu
3347
}
3448
],
3549
values: [

0 commit comments

Comments
 (0)