vue组件用jquery_Vue jQuery DataTables.net包装器组件

陈畅

2023-12-01

vue组件用jquery

vue-datatables-net (vue-datatables-net)

This library is a Vue 2 wrapper for jQuery DataTables. It's a tiny wrapper that doesn't include anything, not even the datatables.net core library.

该库是jQuery DataTables的Vue 2包装器。这是一个很小的包装程序，不包含任何内容，甚至不包含datatables.net核心库。

View Demo 查看演示 View Github 查看Github

发展历程 (Development)

laravel-mix is use to simplify build and packaging.

laravel-mix用于简化构建和包装。

Requirement: Install NodeJS, NPM

要求：安装NodeJS，NPM

Then:

然后：

git clone https://github.com/niiknow/vue-datatables-net
cd vue-datatables-net
npm install

or in one command:

或在一个命令中：

npm install git+https://github.com/niiknow/vue-datatables-net.git

To run locally (automatically launch firefox):

要在本地运行(自动启动firefox)：

npm run watch

To build library for npm publish:

要为npm发布构建库：

npm run build

This library is available on NPM, to install:

该库可在NPM上安装：

npm install vue-datatables-net

用法 (Usage)

This library default configuration and provide example for bootstrap4 styling. Though, it allow for complete flexibility of customization with any other jQuery DataTables supported theme.

该库的默认配置，并提供bootstrap4样式的示例。但是，它允许使用任何其他jQuery DataTables支持的主题进行自定义的完全灵活性。

Example of imports for Bootstrap 4:

Bootstrap 4的导入示例：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href='https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css'>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<script>
import VdtnetTable from 'vue-datatables-net'

import 'datatables.net-bs4'

// below you should only import what you need
// Example: import buttons and plugins
import 'datatables.net-buttons/js/dataTables.buttons.js'
import 'datatables.net-buttons/js/buttons.html5.js'
import 'datatables.net-buttons/js/buttons.print.js'

// import the rest for your specific theme
import 'datatables.net-buttons-bs4'
import 'datatables.net-select-bs4'

import 'datatables.net-select-bs4/css/select.bootstrap4.min.css'
import 'datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css'
</script>

See example App

查看范例应用程式

Example App demonstrate how to pass overrides for our jQuery DataTable default options - https://github.com/niiknow/vue-datatables-net/blob/master/example/app.vue

示例应用程序演示了如何传递jQuery DataTable默认选项的替代-https : //github.com/niiknow/vue-datatables-net/blob/master/example/app.vue

NOTE: Our example use a free API endpoint from typicode, which is simply a JSON endpoint. As a result, we needed to define a dataSrc wrapper like so:

注意：我们的示例使用来自typicode的免费API端点，它只是一个JSON端点。结果，我们需要像这样定义一个dataSrc包装器：

ajax: {
  url: 'https://jsonplaceholder.typicode.com/users',
  dataSrc: (json) => {
    return json
  }
}

Of course, for your implementation, simply use a server-side compatible parser. Below are some jQuery DataTables server-side parsers:

当然，对于您的实现，只需使用服务器端兼容的解析器。以下是一些jQuery DataTables服务器端解析器：

PHP - https://github.com/lampjunkie/php-datatables
PHP- https://github.com/lampjunkie/php-datatables
PHP Symphony - https://github.com/stwe/DatatablesBundle
PHP Symphony- https://github.com/stwe/DatatablesBundle
PHP Laravel - https://github.com/yajra/laravel-datatables
PHP Laravel- https://github.com/yajra/laravel-datatables
dotNET - https://github.com/ALMMa/datatables.aspnet, https://github.com/garvincasimir/csharp-datatables-parser
dotNET- https : //github.com/ALMMa/datatables.aspnet，https : //github.com/garvincasimir/csharp-datatables-parser
NodeJS - https://github.com/jpravetz/node-datatable
NodeJS- https://github.com/jpravetz/node-datatable
Rails - https://github.com/jbox-web/ajax-datatables-rails
Rails- https://github.com/jbox-web/ajax-datatables-rails
Python - https://github.com/Pegase745/sqlalchemy-datatables
Python- https://github.com/Pegase745/sqlalchemy-datatables

文献资料 (Documentation)

Since it's a wrapper, all/most features are provided by the jQuery DataTables library.

由于它是包装器，因此所有/大多数功能都由jQuery DataTables库提供。

参量 (Parameters)

Our component parameters:

我们的组件参数：

props: {
    /**
     * The table id - useful for saveState
     *
     * @type String
     */
    id: {
      type: String
    },
    /**
     * Set the container classes.
     *
     * @type String
     */
    containerClassName: {
      type: String,
      default: 'table-responsive d-print-inline'
    },
    /**
     * Set the table classes you wish to use, default with bootstrap4
     * but you can override with: themeforest, foundation, etc..
     *
     * @type String
     */
    className: {
      type: String,
      default: 'table table-striped table-bordered nowrap w-100'
    },
    /**
     * the options object: https://datatables.net/manual/options
     *
     * @type Object
     */
    opts: {
      type: Object
    },
    /**
     * List all fields to be converted to opts columns
     *
     * @type Object
     */
    fields: {
      type: Object
    },
    /**
     * Pass in DataTables.Net jQuery to resolve any conflict from
     * multiple jQuery loaded in the browser
     *
     * @type Object
     */
    jquery: {
      type: Object
    },
    /**
     * Pass in Vue to resolve any conflict from multiple loaded
     *
     * @type Object
     */
    vue: {
      type: Object
    },
    /**
     * The select-checkbox column index (start at 1)
     * Current implementation require datatables.net-select
     *
     * @type Number
     */
    selectCheckbox: {
      type: Number
    },
    /**
     * Provide custom local data loading.  Warning: this option has not been
     * thoroughly tested.  Please use ajax and serverSide instead.
     *
     * @type Function
     */
    dataLoader: {
      type: Function
    },
    /**
     * true to hide the footer of the table
     *
     * @type Boolean
     */
    hideFooter: {
      type: Boolean
    },
    /**
     * The details column configuration of master/details.
     *
     * @type {Object}
     */
    details: {
      type: Object
    }
  }

fields is an schema object that identify all datatables.net columns, example:

fields是一个架构对象，它标识所有datatables.net列，例如：

Example:

例：

fields: {
  _id: { label: "ID" },
  title: { label: "Title", searchable: true, sortable: true },
  type: { label: "Type" }
}

字段属性 (Field properties)

label Title for display
label显示标题
searchable true to enable search of field
searchable true以启用字段搜索
sortable false to disable sorting
sortable为false表示禁用排序
name to override the name
name以覆盖名称
data differentiate server-side sorting field - optional default to name
data区分服务器端排序字段- name可选默认值
visible false to hide
visible错误隐藏
width to provide custom width
width ，以提供定制的宽度
className set column class names
className设置列的类名
defaultContent provide default html when no data available
当没有可用数据时， defaultContent提供默认html
render custom cell rendering function https://datatables.net/reference/option/columns.render
render自定义单元格渲染功能https://datatables.net/reference/option/columns.render
template simple vue template for the field. See example App.
template该字段的简单vue模板。请参阅示例应用程序。
defaultOrder null, asc/desc - the default/initial sort order
defaultOrder null，asc / desc-默认/初始排序顺序
isLocal same as setting both searchable and sortable to false
isLocal与将searchable和sortable都设置为false相同
index allow for column positioning
index允许列定位

It is important to understand why it is better to use fields and not opts.columns. Though, fields is optional if one wish to use the raw opts.columns definition.

了解为什么使用fields而不是opts.columns更好的原因很重要。但是，如果希望使用原始的opts.columns定义，则fields是可选的。

One Purpose of this component is to extend jQuery DataTables function and features, example:

该组件的一个Purpose是扩展jQuery DataTables的功能和特性，例如：

Simplification of features configuration, such as select-checkbox column, custom action buttons, and/or future Vue specific features.
简化功能配置，例如select-checkbox列，自定义action按钮和/或将来的Vue特定功能。
Allow for customizable table heading on a per-column basis; thereby, not having to define all html for each column header.
允许按列自定义表格标题；因此，不必为每个列标题定义所有html。
Ability to have simple template field so you can pass schema JSON from static file or some API, instead of requiring to define a javascript render function. Though, the render function would provide best performance.
具有简单template字段的能力，因此您可以从静态文件或某些API传递模式JSON，而无需定义javascript render函数。但是， render功能将提供最佳性能。
Having schema also allow for future features, such as editable column/cell.
具有架构还允许将来的功能，例如可编辑的列/单元格。

大事记 (events)

Custom events for this component.

此组件的自定义事件。

<vdtnet-table ...
  @table-creating="doSomethingBeforeDataTableCreate"
  @table-created="doSomethingImmediatelyAfterTableCreatedAndInitialized"
  @reloaded="doSomethingAfterDataLoadOrReloaded"
/>

doSomethingImmediatelyAfterTableCreatedAndInitialized(vdtnet) {
    // use vdtnet.dataTable to access the jQuery DataTables object, example:
     vdtnet.dataTable.on( 'order.dt',  function () { eventFired( 'Order' ); } )
   }

table-creating this is right before jQuery(el).DataTable(component.options) is called allowing you to modify component options.
table-creating是在调用jQuery(el).DataTable(component.options)之前，您可以修改组件选项。
table-created this is after we called jQuery(el).DataTable and initialized all the columns.
table-created这是在我们调用jQuery(el).DataTable并初始化所有列之后。
reloaded this is after data has been load/reloaded
reloaded是在加载/重新加载数据之后

附加标题 (Additional Headers)

Many server-side usage require CSRF and/or API token headers. Since jQuery DataTables options are completely exposed as opts, simply use the native method per jQuery DataTables example

许多服务器端用法需要CSRF和/或API令牌标头。由于jQuery DataTables options完全作为opts公开，因此每个jQuery DataTables示例只需使用本机方法

i.e, something like:

即，类似：

opts: {
  'ajax': {
    'url': url,
    'type': 'GET',
    'beforeSend': function (request) {
        request.setRequestHeader("token", token);
    }
  }
}

// or as headers parameter
opts: {
  'ajax': {
    'url': url,
    'type': 'GET',
    'headers': {
      'CSRFToken': TOKEN
    }
  }
}

// or as query parameter
opts: {
  'ajax': {
    'url': url,
    'type': 'GET',
    'data': function ( d ) {
      d.CSRFToken = TOKEN;
    }
  }
}

If you haven't already guessed, ajax is basically the signature of jQuery.ajax, which can be seen in this jQuery DataTables ajax pipeline code demonstration.

如果您还没有猜到，那么ajax基本上就是jQuery.ajax的签名，可以在此jQuery DataTables ajax管道代码演示中看到。

行动作按钮 (Row Action Buttons)

Use data-action attribute to automatically wire up any action button/elements. To render action button/element in a row, simply define dummy field like so:

使用data-action属性可以自动连接任何操作按钮/元素。要连续渲染动作按钮/元素，只需定义虚拟字段，如下所示：

actions: {
  label: 'Actions',
  defaultContent: '<a href="javascript:void(0);" data-action="edit" class="btn btn-primary btn-sm"><i class="mdi mdi-square-edit-outline"></i> Edit</a>' +
    '<span data-action="delete" class="btn btn-danger btn-sm"><i class="mdi mdi-delete"></i> Delete</span>'
}

重载方法和重载事件 (Reload method and reloaded event)

Allow you to refresh ajax content after some event. Let say you have something like this:

允许您在某些事件后刷新ajax内容。假设您有这样的事情：

<template>
  <div id="app">
    <vdtnet-table
      :fields="fields"
      :opts="options"
      ref="table"
      @delete="doAjaxDelete"
      @reloaded="doSomethingAfterReload"
    />
  </div>
</template>
<script>
// ... component top ...
  methods: {
    doAjaxDelete(data, row, tr, target) {
      // do some ajax delete
      // then reload after ajax complete
      this.$refs.table.reload()
    },
    doSomethingAfterReload(data, table) {
      // some something after data loaded from server
    }
  }
// ... component bottom ...

可自定义的表头(第)列 (Customizable table head (th) columns)

Let say you have a column description, you can provide table head template for the description column like so:

假设您有一个列description ，可以为description列提供表头模板，如下所示：

<template slot="HEAD_description">
  <h1>desc</h1>
</template>

dom(搜索和工具栏) (dom (Searching and Toolbar))

dom configuration defines how jQuery DataTables components are rendered - https://datatables.net/reference/option/dom

dom配置定义了如何呈现jQuery DataTables组件-https: //datatables.net/reference/option/dom

Our default configuration compatible with Bootstrap4 is:

我们与Bootstrap4兼容的默认配置是：

"tr<'row vdtnet-footer'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'pl>>"

This is based on the configuration lftiprB, also see: https://datatables.net/reference/option/dom

这基于配置lftiprB ，另请参见： https : lftiprB

Note, we do not include toolbar buttons (B) or search control (s). This is because we defer these functions to you (the User). Toolbar Buttons are client-side; and since we do not use client-side, we don't need these buttons. We expose a search method on vdtnet-table so you can use this method to perform search.

请注意，我们不包括工具栏按钮(B)或搜索控件。这是因为我们将这些功能交给了您(用户)。工具栏按钮在客户端；并且由于我们不使用客户端，因此不需要这些按钮。我们在vdtnet-table上公开了一种search方法，因此您可以使用此方法执行搜索。

Simply create your own Buttons for server-side exports, bulk, and/or other things. Create your own search control and use the search method. See example App. All these things are now Vue natives.

只需为服务器端导出，批量和/或其他操作创建您自己的Button。创建您自己的搜索控件并使用search方法。请参阅示例应用程序。所有这些东西现在都是Vue本地人。

Though, if you really insists on using these client-side controls, simply override the default opts.dom and opts.buttons with your own settings.

但是，如果您确实坚持使用这些客户端控件，则只需使用自己的设置覆盖默认的opts.dom和opts.buttons 。

getServerParams方法 (getServerParams method)

This function return the parameters last used by our server-side endpoint. It allow you to use for server-side export API call. Example:

该函数返回服务器端端点最后使用的参数。它允许您用于服务器端导出API调用。例：

const parms = this.$refs.table.getServerParams()
parms.export = 'csv'
// boom export
const url = 'export.php?' + $.param(data)
window.open(url)

React灵敏 (Responsive)

In Bootstrap4, there's a class called table-responsive that wrap the table at each screen breakpoint. We apply this class on our wrapper div to make the table scroll horizontally. We also include d-print-inline for print.

在Bootstrap4中，有一个称为表响应的类，该类在每个屏幕断点处包装表。我们在包装器div上应用此类，以使表格水平滚动。我们还包括用于打印的d-print-inline 。
Alternatively, you can set options.responsive = true to use jQuery DataTable responsive plugin. WARNING: This plugin does not play well with select-checkbox, master-details, and many other features. It is recommended to use option 1 above.

另外，您可以设置options.responsive = true以使用jQuery DataTable响应式插件。警告：此插件不能与select-checkbox ， master-details和许多其他功能配合使用。建议使用上面的选项1。

主从模式 (Master-details pattern)

details configuration allow you to create template for displaying details row in Master-details pattern. Schema:

details配置允许您创建模板以在Master-details模式中显示details行。架构：

{
  index: 'a number (start at 1) representing the column position',
  template: 'the template where {{ data.column }} is the item/row data',
  render: 'provide a custom render function as alternative to template'
}

本机模板(排序)说明 (Native templating (sort-of) explained)

Take a look at example app, you can template:

看一下示例应用程序，您可以模板化：

<template
  slot="address2"
  slot-scope="ctx"
>
  <span>{{ ctx.data.city }}, {{ ctx.comp.formatCode(ctx.data.zipcode) }}</span>
</template>

slot is the field/column name
slot是字段/列的名称
slot-scope define the context object as ctx in this example
在此示例中， slot-scope将上下文对象定义为ctx
The context object will have the following properties
上下文对象将具有以下属性
1. data the column value, in this case is data的列值，在这种情况下是address property which is an object with sub-properties (street, suite, city, zipcode, geo, etc...)address属性，它是具有子属性(街道，套房，城市，邮政编码，geo等)的对象
2. type the jQuery DataTables rendering type, usually type jQuery DataTables呈现类型，通常displaydisplay
3. row the entire row datarow整行数据
4. meta jQuery DataTables column configmeta jQuery DataTables列配置
5. vdtnet the vdtnet table objectvdtnet vdtnet表对象
6. def vdtnet field configdef vdtnet字段配置
7. comp your component, notice how it demonstrate calling of a function on the example component to strip out all number after the dash. You can use this to do things like permission checking. Also see comp您的组件，请注意它演示了如何在示例组件上演示调用函数以在破折号后去除所有数字。您可以使用它来执行权限检查之类的操作。另请参见下面的Note below.注释。

Note: Things that are related to display rendering should work. Event handling doesn't work and I'm still looking for better way handle this. Of course, you can still use data-action to handle clicks.

注意：与显示渲染有关的事物应该起作用。事件处理不起作用，我仍在寻找更好的方法来处理此问题。当然，您仍然可以使用data-action来处理点击。

出口 (Export)

This is something you want to explore on your own. We try our best to provide as much example of export as possible in our demo, but Server-Side and/or Language/Framework Specific Code is too much/time-consuming to dive into. Also, sometime output rendering are ties to specific requirement and cannot generically meet everyone needs. We suggest that you create a Bounty for your specific needs.

这是您想自己探索的东西。我们尽力在演示中提供尽可能多的导出示例，但是服务器端和/或特定于语言/框架的代码过于繁琐/耗时。而且，有时输出渲染与特定要求相关，并且不能普遍满足所有人的需求。我们建议您为特定需求创建赏金。

Client-Side This is mostly provided by jQuery DataTables. We demonstrate in our default demo. You can find the documentation for Buttons directly on the jQuery DataTables website.

客户端这主要由jQuery DataTables提供。我们在默认演示中进行演示。您可以直接在jQuery DataTables网站上找到Buttons的文档。

Server-Side Our demo for server-side export is here: https://laratt.niiknow.org/home/contacts

服务器端我们的服务器端导出演示在这里： https : //laratt.niiknow.org/home/contacts

The source of the demo can be found here: https://github.com/niiknow/laratt-api And, specifically, the client-side vue component usage source: https://github.com/niiknow/laratt-api/blob/5117bfae1273b31f95af6aa99c51aae7fc413d2f/resources/js/components/DataTableNet.vue#L148

可以在以下位置找到该演示的源： https : //github.com/niiknow/laratt-api并且，具体地说，客户端vue组件使用源： https : //github.com/niiknow/laratt-api/ blob / 5117bfae1273b31f95af6aa99c51aae7fc413d2f / resources / js / components / DataTableNet.vue＃L148

The code use convention to calculate a route/url as:

该代码使用convention将路由/ URL计算为：

url: that.$app.apiRoute(that.rName, that.rPath),

Which result to a URL like so: https://laratt.niiknow.org/api/v1/democontact/example?x-tenant=test&x-api-key=demo123

URL的结果如下： https : //laratt.niiknow.org/api/v1/democontact/example?x-tenant=test&x-api-key=demo123

And the server-side source for the export is simply: https://github.com/niiknow/laratt-api/blob/876ce385fc64d83b564f2e697790465675741634/api/Controllers/DemoContactController.php#L90

导出的服务器端源很简单： https : //github.com/niiknow/laratt-api/blob/876ce385fc64d83b564f2e697790465675741634/api/Controllers/DemoContactController.php#L90

As far as PDF export, you will need to handle this yourself. Tip, use laravel-snappy. The basic concept is to render your result to some html/blade template and use laravel-snappy to convert HTML to PDF.

至于PDF导出，您需要自己处理。提示，请使用laravel-snappy 。基本概念是将结果呈现到某些html / blade模板，并使用laravel-snappy将HTML转换为PDF。

Export Tip Outside of csv export, most modern OS and Browser support PDF printing. As a result, simply instruct the user to Print your page and use printing CSS to manipulate for exporting of PDF.

导出提示除csv导出外，大多数现代操作系统和浏览器均支持PDF打印。因此，只需指示用户打印页面并使用打印CSS即可操作以导出PDF。

提示 (Tips)

If you're like us, you want to write as little code as possible; as in, application of the DRY Principle. This mean the UI has a standard look/feel/behavior; where toolbar, search, and other controls are place at specific location. So this mean you want to wrap this component inside your own component? Our sample App give you a good idea on how to start. Below are a few things to consider:

如果您像我们一样，则希望编写尽可能少的代码。例如，应用DRY原则。这意味着UI具有标准的外观/感觉/行为。工具栏，搜索和其他控件放置在特定位置的位置。因此，这意味着您想将此组件包装在您自己的组件中？我们的示例应用程序为您提供了一个很好的入门方法。以下是一些要考虑的事项：

Identify all properties of the new component and howto translate into this component. Example: hidePageLength -> opts.lengthChange, hideQuickSearch -> v-if on quickSearch form, hideToolbar -> v-if on toolbar div, etc...
标识新组件的所有属性以及如何转换为该组件。例如：hidePageLength-> opts.lengthChange，hideQuickSearch-> quickSearch表单上的v-if，hideToolbar->工具栏div上的v-if，等等...
Identify methods to wrap, i.e. your component API: reload, getServerParams, etc...
确定要包装的方法，即组件API：重新加载，getServerParams等。
Wrap individual action events you want to expose, or simply wrap with v-on="$listeners" to pipe all events from this component to your component.
包装要公开的单个动作事件，或仅使用v-on =“ $ listeners”包装以将所有事件从该组件传递到您的组件。

翻译自: https://vuejsexamples.com/vue-jquery-datatables-net-wrapper-component/