Shulou(Shulou.com)06/02 Report--

This article introduces the knowledge of "which table plug-in bootstrap uses". Many people will encounter such a dilemma in the operation of actual cases, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Bootstrap can use the "Bootstrap-Table" table plug-in. "Bootstrap-Table" is a Bootstrap-based jQuery table plug-in, through simple settings, you can have a powerful single, multi-selection, sorting, paging, as well as editing, export, filtering and so on.

Operating environment of this tutorial: Windows7 system, bootsrap3.3.7 version, DELL G3 computer

The "Bootstrap-Table" table plug-in is available for bootstrap.

Bootstrap table is a jQuery form plug-in based on Bootstrap, with relatively complete functions, which can achieve a series of functions such as asynchronous data acquisition, editing, sorting and so on. The most valuable thing is that it only needs some simple configuration to achieve a fully functional online table.

Official website address: http://bootstrap-table.wenzhixin.net.cn/zh-cn/

Github address: https://github.com/wenzhixin/bootstrap-table

Chinese document: http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

Main function

Support for Bootstrap 3 and Bootstrap 2

Adaptive interface

Fixed meter head

Very rich configuration parameters

Use directly through the label

Show / hide columns

Show / hide header

Obtain data in JSON format through AJAX

Support sorting

Formatting table

Support single selection or multiple selection

Powerful paging function

Support for card view

Support for multilingual

Support plug-in

Advantages

Low learning cost, simple configuration and complete documentation

Seamless connection with Bootstrap, consistent with the overall style, but also convenient for secondary development

Active developers and regular maintenance of Github

The introduction of Bootstrap Table

Generally speaking, there are two ways to introduce Bootstrap Table:

1. Download the source code directly and add it to the project.

Since Bootstrap Table is a component of Bootstrap, it is dependent on Bootstrap, so we first need to add a reference to Bootstrap. Bootstrap packages can be found directly in http://v3.bootcss.com/, version 4 has come out of the preview version, but it is recommended to use the relatively stable Bootstrap3, currently the latest 3.3.5. Then there is the Bootstrap Table package. Since it is open source, let's go directly into its source https://github.com/wenzhixin/bootstrap-table and git it down. Then add the two packages to the project separately.

2. Use our magic Nuget

Open Nuget and search for these two packages

We can install it directly.

The version of Bootstrap Table turns out to be 0.4, which is ridiculous. So the blogger suggested that Bootstrap Table's package should be downloaded directly in the source code. The latest version of Bootstrap Table seems to be 1.9.0.

Code detailed explanation

Of course, when the component reference comes in, it's easy to use, but there are a lot of details that we need to deal with. We'll talk about it later. Let's take a look at how to use it.

1. Refer to the relevant components in the cshtml page and define an empty table. @ {Layout = null } BootStrap Table uses @ * 1, Jquery component references * @ * 2, bootstrap component references * @ @ * 3, bootstrap table components and references to Chinese packages * @ @ * 4, Page Js file reference * @ query condition department name status Inquire Add, modify and delete

After introducing the required files, the most important thing we need is to define an empty table, as shown above. Of course, Bootstrap table also provides a brief introduction, defining something like "data-..." directly in the table tag. There is no need to register relevant attributes in js, but bloggers feel that although this usage is simple, it is not very flexible, and it is not easy to deal with advanced uses such as parent-son tables, so we still use the initialization method in js to use table components.

2. Js initializes $(function () {/ / 1. Initialize Table var oTable = new TableInit (); oTable.Init (); / / 2. Initialize the click event of Button var oButtonInit = new ButtonInit (); oButtonInit.Init ();}); var TableInit = function () {var oTableInit = new Object () / / initialize Table oTableInit.Init = function () {$('# tb_departments'). BootstrapTable ({url:'/ Home/GetDepartment', / / request backend URL (*) method: 'get', / / request method (*) toolbar:' # toolbar' / / which container to use for the tool button striped: true, / / whether to display the line spacing color cache: false, / / whether to use cache Default is true So in general, you need to set this property (*) pagination: true, / / whether to display paging (*) sortable: false, / / whether to enable sorting sortOrder: "asc", / / sort method queryParams: oTableInit.queryParams / / pass parameter (*) sidePagination: "server", / / paging method: client client paging Server server pagination (*) pageNumber:1, / / initialize and load the first page Default first page pageSize: 10, / / number of rows per page (*) pageList: [10,25,50,100], / / number of rows per page (*) search: true, / / whether to display a table search, this search is a client search and will not go to the server, so It doesn't make much sense to me: strictSearch: true, showColumns: true, / / whether to show all the columns showRefresh: true, / / whether to display the refresh button minimumCountColumns: 2, / / the minimum allowed number of columns clickToSelect: true / / whether to enable click to select line height: 500, / / line height If the height property is not set, the table automatically feels the height of the table according to the number of records uniqueId: "ID", / / the unique identification of each row General primary key column showToggle:true, / / whether to display the detail view and list view toggle button cardView: false, / / whether to display the detail view detailView: false / / whether to display the parent-child table columns: [{checkbox: true}, {field: 'Name', title:' department name'}, {field: 'ParentName' Title: 'superior department'}, {field: 'Level', title:' department level'}, {field: 'Desc', title:' description'},]}) } / / get the query parameter oTableInit.queryParams = function (params) {var temp = {/ / the name of the key here and the variable name of the controller must be changed all the time. The controller also needs to be changed to the same limit: params.limit, / / page size offset: params.offset, / / page number departmentname: $("# txt_search_departmentname") .val (), statu: $("# txt_search_statu") .val ()} Return temp;}; return oTableInit;}; var ButtonInit = function () {var oInit = new Object (); var postdata = {}; oInit.Init = function () {/ / initialize the button event on the page}; return oInit;}

The initialization of the table is also very simple, just define the relevant parameters. Some of the above parameters that bloggers think are important are annotated, and several parameters necessary for initializing Table are also marked with (*). If your form also has too many page requirements, you can use the necessary parameters directly. Similarly, there are many parameters that need to be set in the columns parameters, such as column sorting, alignment, width, and so on. These bloggers feel that it is relatively simple and will not involve the function of the table. Just take a look at API.

3. The corresponding method in Controller: public JsonResult GetDepartment (int limit, int offset, string departmentname, string statu) {var lstRes = new List (); for (var I = 0; I < 50; iTunes +) {var oModel = new Department (); oModel.ID = Guid.NewGuid (). ToString (); oModel.Name = "sales department" + I OModel.Level = i.ToString (); oModel.Desc = "No description information yet"; lstRes.Add (oModel);} var total = lstRes.Count; var rows = lstRes.Skip (offset) .Take (limit). ToList (); return Json (new {total = total, rows = rows}, JsonRequestBehavior.AllowGet);}

One thing to note here: if it is server paging, the returned result must contain two parameters: total and rows. Omission or miswriting can cause the table to fail to display data. Conversely, if you are paging on the client side, you will return a collection object to the front end.

4. Effect and description

Or post some effect pictures:

This is the end of the content of "which table plug-in bootstrap uses". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.