vuetiful+vue实现可排序编辑格式化的表格效果代码
代码语言：html
所属分类：表格
代码描述：vuetiful+vue实现可排序编辑格式化的表格效果代码，数据表拥有以下特点： 排序功能：允许用户按照一列或多列的数值进行升序或降序排序。 多列分组：可以根据一个或多个列的值对数据进行分组归类。 筛选功能：通过设定条件，筛选出满足特定条件的数据行。 实时编辑：用户可直接在数据表中对内容进行编辑，改动即时生效。 自定义筛选器/格式器支持：用户可自定义筛选器和格式器，满足特定的数据展示需求。 自定义聚合函数：如最小值、最大值、总计等，用于计算分组数据的统计信息。 自定义列标题模板：允许用户自定义表头样式和内
代码标签： vuetiful vue 排序 编辑 格式化 表格
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.5.0.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,600,600italic,700'>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/vuetiful.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/introjs.min.css">
<style>
h1 {
margin-top: 0.25em;
}
a {
cursor: pointer;
}
.container {
padding: 1rem 0;
}
.datatable-options-toggle {
padding: 0.5rem 1rem;
}
.checkable-column {
text-align: center;
}
.checkable-column .checkbox {
margin: 0;
}
.paginator .datatable {
border: none;
}
</style>
</head>
<body translate="no">
<div id="datatables" class="container">
<h1>Vue.JS Advanced Datatable Component</h1>
<p>
The datatable has the following features:
<ul>
<li>Sorting</li>
<li>Multi-column grouping</li>
<li>Filtering</li>
<li>Real-time editing</li>
<li>Custom filter/formatter support</li>
<li>Custom aggregate functions (min, max, total etc.)</li>
<li>Custom column header templates</li>
<li>Custom cell templates (for both view and edit modes)</li>
</ul>
</p>
<p>
This component makes no assumptions about your architecture, design, and app functionality. It is completely customizable and very easy to use.
</p>
<h3>How to use</h3>
<p>
Click column headers to sort by that column (click again to change sort direction). You can filter the table's data by typing in the textbox at the bottom of the table. Drag a column to the middle of the table to group by that column. The grouping sequence will be displayed at the top of the table. Click the <strong>x</strong> on the group to stop grouping by that column. Full documentation is available.
</p>
<div>
<h3>Configuration</h3>
<p>
Use this table to see real-time editing of the column names, widths, sorting, grouping and the calculation of totals. You can also toggle edit mode and line numbers.
</p>
<div class="grid-row" layout="row top-stretch">
<div class="grid-cell">
<toggle id="striped" v-model="customers.striped" data-intro="Toggle alternate row colouring on or off for all datatables" data-step="1">Striped</toggle>
<toggle id="line-numbers" v-model="customers.lineNumbers" data-intro="Toggle line numbers on or off for all datatables" data-step="2">Line Numbers</toggle>
<toggle id="editable" v-model="customers.editable" data-intro="Toggle edit mode for all datatables" data-step="3">Editable</toggle>
</div>
</div>
<div class="grid-row" layout="row top-stretch">
<div class="grid-cell">
<datatable id="data-table-options" :source="customers.columns" :filterable="false" editable>
<datatable-column id="label" label="Column Name" width="25"></datatable-column>
<datatable-column id="width" label="Width"></datatable-column>
<datatable-column id="sortable" label="Sortable" data-intro="Clicking a column will sort by that column" data-step="4"></datatable-column>
<datatable-column id="groupable" label="Groupable" data-intro="Drag a column into the middle of the table to group by that column. You can repeat this process to perform nested grouping" data-step="5"></datatable-column>
<template slot="sortable" scope="cell">
<div class="datatable-options-toggle">
<toggle :id="cell.row.id + '-sortable'" v-model="cell.row.sortable"></toggle>
</div>
</template>
<template slot="groupable" scope="cell">
<div class="datatable-options-toggle">
<toggle :id="cell.row.id + '-groupable'" v-model="cell.row.groupable"></toggle>
</div>
</template>
</datatable>
</div>
</div>
</div>
<div>
<h3>Basic Example</h3>
<p>
This is a basic example of the datatable component. As you can see from the source (in the editor view) the amount of markup and script required use the datatable is minimal.
</p>
<div class="grid-row" layout="row top-stretch">
<div class="grid-cell">
<datatable id="data-table-main"
:source="customers.rows"
:striped="customers.striped"
:editable="customers.editable"
:line-numbers="customers.lineNumbers">
<datatable-column
v-for="column in customers.columns"
:id="column.id"
:label="column.label"
:width="column.width"
:sortable="column.sortable"
:groupable="column.groupable"
:aggregators="column.aggregators"
:formatter="column.formatter">
</datatable-column>
</datatable>
</div>
</div>
</div>
<div>
<h3>Custom Cell and Header Templates</h3>
<p>
This example shows how you can leverage the flexibility of the datatable's custom templating features to create selectable items. This technique can be used to cater for most custom templating requirements you may have.
</p>
<div class="grid-row" layout="row top-stretch">
<div class="grid-cell">
<h4>Main datatable</h4>
<datatable id="data-table-main"
:source="customers.rows"
:striped="customers.striped"
:editable="customers.editable"
:line-numbers="customers.lineNumbers">
<datatable-column id="sel" label="sel" width="3.25rem" class="checkable-column" :sortable="false" :groupable="false" data-intro="Use custom cell tamplates to put your own content in cells" data-step="6">
<checkbox id="sel-all" v-model="selectAll"></checkbox>
</datatable-column>
<datatable-column
v-for="column in customers.columns"
:id="column.id"
:label="column.label"
:width="column.width"
:sortable="column.sortable"
:groupable="column.groupable"
:formatter="column.formatter">
</datatable-column>
<datatable-column id="actions" label="Actions" :sortable="false" :groupable="false"></datatable-column>
<template slot="sel" scope="cell">
<div class="checkable-column">
<checkbox :id="cell.row.id" :value="cell.row" v-model="customers.selected"></checkbox>
</div>
</template>
<template slot="actions" scope="cell">
<a @click="deleteCustomer(cell.row)">Delete Customer</a>
</template>
</datatable>
</div>
</div>
<div class="grid-row" layout="row top-stretch">
<div class="grid-cell">
<h4>Selected Items</h4>
<datatable id="data-table-selected" :source="customers.selected">
<datatable-column
v-for="column in customers.columns"
:id="column.id"
:label="column.label"
:width="column.width"
:formatter="column.formatter">
</datatable-column>
</datatable>
</div>
</div>
</div>
<div>
<h3>Formatting</h3>
<div class="grid-row" layout="row top-stretch">
<div class="grid-cell">
<datatable id="data-table-options" :source="formatters" :filterable="false" editable data-intro="Apply different formatters to data to customize how your data is displayed" data-step="7">
<datatable-column id="name" label="Name" width="33" :sortable="false" :groupable="false"></datatable-column>
<datatable-column id="format" label="Format" :sortable="false" :groupable="false"></datatable-column>
<template slot="format" scope="cell">
<div v-if="cell.row.id === 'C'">
<select v-model.lazy="customers.currency">
<option :value="code" v-for="(symbol, code) in currencies">{{ code }} ({{ symbol }})</option>
</select>
</div>
<div v-else>
<select v-model.lazy="customers.dateFormat">
<option :value="format" v-for="format in dateFormats">{{ format }}</option>
</select>
</div>
</template>
</datatable>
</div>
</div>
<div class="grid-row" layout="row top-stretch">
<div class="grid-cell">
<datatable id="data-table-main"
:source="customers.rows"
:striped="customers.striped"
:editable="customers.editable"
:line-numbers="customers.lineNumbers">
<datatable-column
v-for="column in customers.columns"
:id="column.id"
:label="column.label"
:width="column.width"
:sortable="column.sortable"
:groupable="column.groupable"
:formatter="column.formatter">
</datatable-column>
</datatable>
</div>
</div>
</div>
<div&.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0