tmsTable - as I wrote a plugin to display tables, guided by the principle of KISS
“KISS (keep it short and simple -“ make it shorter and simpler ”) is a design process and principle in which the simplicity of a system is declared as the main goal and / or value.” Wikipedia
That's the way I have lately been increasingly inclined to interpret the abbreviation KISS and write software components for various kinds of products. It is on this principle that the library proposed in this review is written. And that is why it will develop in a given manner in the future.
I will say right away that I never worked as a JS programmer. During the 15 years of his career, he was more involved in the server side. As for the client side, he was more often responsible for the design of interfaces, and he trusted the layout to professionals.
It so happened that in 2012 I switched to a new job and began working on two large projects. Ironically, you had to write code for both servers and clients. The peculiarity was that in both projects the client part had to be a thin client for displaying a large amount of heterogeneous tabular, digital, analytical data. Accordingly, a large number of different libraries and frameworks on this topic were reviewed. In this article I will mention only a few of them: extJS , jqGrid , dhtmlx (which was used as a set of hotel plug-ins, and eventually grew into what you can see today) and a dozen different grids.
')
And after 3 years, the redundancy of products that were once small and light began to be clearly felt (not only by me and not only in js but in general in software). Over time, there is a proliferation of projects and the transformation of effective tools into slow-moving harvesters. They can do anything, but the price for this is traffic and delays in the work of the client side. Lost flexibility and ease of use.
As a result, it was decided to emerge as the idea of “whether or not to stir up your grid with blackjack ...” to develop a simple tool that would quickly perform the required tasks.
At first, this idea was perceived as a scam, which resulted in the tmsTable code, which I now constantly use in a number of projects.
As you can see, the declared functionality is simple to disgrace - this is what I wanted. The tool should be simple. In my case, the resulting library fully implements the entire set of functionality that is required in the vast majority of cases.
Someone might say that the table has no filters. I fully agree - they are not in the usual sense. And will not. The reason is simple: writing filters is a voluminous task (if you want to make them understandable and convenient), which will greatly complicate the library code. In this case, as a rule, native filters are unable to satisfy everyone and everything. As a result, crutches appear and not very clear interfaces, in which some of the filters are in one place, and some in another. Instead of the native filters, you have the postVars attribute in your hands, using which for any task you can make a set of tools for restricting data samples. In my understanding, this is much more convenient than trying to cram your logic into the framework of some third-party library.
As already mentioned, data is pulled from the server in JSON format. Display all or only part of the data you decide. At any time, you can always access the row object with a full set of data.
To create a grid (in its pure form without styles and beauty) in the code page you need to write:
If you are using bootstrap, then most likely you want to use its styles, then you should write
Next, to create a table on the site page, you need to define a container that will contain a label:
Well, actually describe the table:
Everything, before you are presented data in a convenient form.
You can integrate this label into the site, cms, billing ... There is all the basic functionality. It remains only to describe the filters for data and behavior when click and dblclick.
Source code is available at github.com/Tony-M/tmsTable
Examples of use are also available there.
I would be glad if someone library will be useful.
Introduction
That's the way I have lately been increasingly inclined to interpret the abbreviation KISS and write software components for various kinds of products. It is on this principle that the library proposed in this review is written. And that is why it will develop in a given manner in the future.
I will say right away that I never worked as a JS programmer. During the 15 years of his career, he was more involved in the server side. As for the client side, he was more often responsible for the design of interfaces, and he trusted the layout to professionals.
It so happened that in 2012 I switched to a new job and began working on two large projects. Ironically, you had to write code for both servers and clients. The peculiarity was that in both projects the client part had to be a thin client for displaying a large amount of heterogeneous tabular, digital, analytical data. Accordingly, a large number of different libraries and frameworks on this topic were reviewed. In this article I will mention only a few of them: extJS , jqGrid , dhtmlx (which was used as a set of hotel plug-ins, and eventually grew into what you can see today) and a dozen different grids.
')
And after 3 years, the redundancy of products that were once small and light began to be clearly felt (not only by me and not only in js but in general in software). Over time, there is a proliferation of projects and the transformation of effective tools into slow-moving harvesters. They can do anything, but the price for this is traffic and delays in the work of the client side. Lost flexibility and ease of use.
As a result, it was decided to emerge as the idea of “whether or not to stir up your grid with blackjack ...” to develop a simple tool that would quickly perform the required tasks.
Tasks
- Make a tool to display tabular data
Requirements :
- Ease of use
- Speed performance
- Small amount of code
- We need functionality that is used constantly. There is no need to make a product 90% of the possibilities of which no one in the project uses.
At first, this idea was perceived as a scam, which resulted in the tmsTable code, which I now constantly use in a number of projects.
Functionality
- Asynchronous data download from the server in json format
- Display data in a table
- The ability to display part of the incoming data
- The ability to paginate and adjust the number of lines per page
- Ability to supplement server requests with various data
- The ability to define decorators for cells and rows in a table in order to provide flexibility in data presentation and implementation
- The ability to sort the table
- The possibility of hiding the header and basement of the table
- Possibility of selects and multiselects of rows using click, CTRL and SHIFT
- The ability to handle click and dblclick in the rows of the table
- The ability to customize the display of the table by applying their own styles.
As you can see, the declared functionality is simple to disgrace - this is what I wanted. The tool should be simple. In my case, the resulting library fully implements the entire set of functionality that is required in the vast majority of cases.
Someone might say that the table has no filters. I fully agree - they are not in the usual sense. And will not. The reason is simple: writing filters is a voluminous task (if you want to make them understandable and convenient), which will greatly complicate the library code. In this case, as a rule, native filters are unable to satisfy everyone and everything. As a result, crutches appear and not very clear interfaces, in which some of the filters are in one place, and some in another. Instead of the native filters, you have the postVars attribute in your hands, using which for any task you can make a set of tools for restricting data samples. In my understanding, this is much more convenient than trying to cram your logic into the framework of some third-party library.
As already mentioned, data is pulled from the server in JSON format. Display all or only part of the data you decide. At any time, you can always access the row object with a full set of data.
A bit about the code
To create a grid (in its pure form without styles and beauty) in the code page you need to write:
<link rel="stylesheet" href="css/tmsTable.css"> <script src="js/jquery-1.10.2.min.js" type="application/x-javascript"></script> <script src="js/tmsTable.js" type="application/x-javascript"></script> If you are using bootstrap, then most likely you want to use its styles, then you should write
<link rel="stylesheet" href="bootstrap/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="bootstrap/dist/css/bootstrap-theme.min.css"> <link rel="stylesheet" href="css/tmsTable.css"> <script src="js/jquery-1.10.2.min.js" type="application/x-javascript"></script> <script src="bootstrap/dist/js/bootstrap.min.js"></script> <script src="js/tmsTable.js" type="application/x-javascript"></script> Next, to create a table on the site page, you need to define a container that will contain a label:
<div id="json_ttt"></div> Well, actually describe the table:
<script> json_params = { id: 'json_ttt' // , class: 'table table-bordered table-striped table-hover' // css , col_names: ['id', 'title', 'date'] // , dataType: 'jsonp' // , url: 'data.json' // , order_direction: 'asc' // , order_by: 'title' // , cols: [ {index: 'id', name: 'id', width: 100} , {index: 'title', name: 'title'} , {index: 'date', name: 'date', width: 100} ] , selectable: true // , rowNum: 20 // , rowNums: [10, 20, 50] // rowNum }; var json_tbl = new tmsTable(json_params) // json_tbl.render(); // </script> Everything, before you are presented data in a convenient form.
You can integrate this label into the site, cms, billing ... There is all the basic functionality. It remains only to describe the filters for data and behavior when click and dblclick.
Source code is available at github.com/Tony-M/tmsTable
Examples of use are also available there.
I would be glad if someone library will be useful.
Source: https://habr.com/ru/post/259795/
All Articles