未加星标

The Common Problems of Data Grids

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏

There have always been data grids in software. The output of an MS-DOS dir command is a grid, after all. The results of any query in any language is displayed as a grid. Every web application has a grid tucked away somewhere in at least one of its pages. Any web framework provides facilities for building grids. Speaking personally, I once built a career on digging out the hidden capabilities of the DataGrid server control in ASP.NET Web Forms. With ASP.NET MVC and the supremacy of explicit HTML over black-box components, the task of building a data grid has become just the same as building a table of data―any data. All that is required is to be able to loop over a collection of objects with a few public and serializable properties.

Although data grids are common and relatively easy to set up, they only become really useful if they support the features that are common to many applications, such as locked columns and headers, paging, scrolling, filtering, and sorting. There are many commercial products that create grids for you with all the features that one can imagine; If one of these products meet all your requirements, it makes a lot of sense to get a commercial product before embarking in a large web project that requires a sophisticated user interface. It can save a great deal of time and effort.

If this was all to be said, this would be a short article. However, the problems start to manifest themselves if you find that you need to make some relevant changes to the “conventional” behavior. Without doubt third-party frameworks are highly customizable but they require you understand their internal architecture and language. This is easier for a large enterprise development to deal with, because there is more likely to be a local guru for the framework that you’re using, but for small teams as well as for your personal engagement it is still worth looking at the alternative strategy of a handcrafted solution based on a simple framework such as JQuery. Data grids always take a bit of thought but they aren’t intrinsically difficult. In this article, I’ll discuss how to turn a HTML table of data into a relatively advanced data grid using custom code as well as the minimum of external dependencies in the form of free jQuery plugins. To illustrate the task of adding functionality to a grid, I’ll show you, in this article, how to implement locked columns, on-demand paging and filtering.

Locked Columns and Headers

Although HTML allows you to define headers in a table as a distinct section, it doesn’t actually support an attribute that could tell browsers to lock the header and/or the footer while the user scrolls vertically. It would be much easier for the browser engine to add this feature than for developers to hack the DOM and play dirty tricks with additional DIV elements and fake tables. The state of the art is that freezing the header is definitely possible but it comes at the cost of client-side tricks to be played each and every time you render a table. Thankfully, we have jQuery plugins that come to the rescue. My favorite plugin is DataTables that you find at http://datatables.net .

Interestingly, the plugin is not limited to fixed headers and columns but provides the foundation for a rich javascript-driven data grid framework with support for filtering, sorting and more. Here’s the sample HTML table we’ll consider. As you can see, it has no special attributes and is just a plain standard HTML table built in Razor from a collection of Country objects. The table element is also styled using plain Bootstrap classes.

<tablewidth="100%" id="my-grid" class="table table-condensed"> <thead> <tr> <th>Name</th> <th>Capital</th> <th>People</th> <th>Area</th> <th>Continent</th> </tr> </thead> <tbody> @foreach (var country in Model.Countries) { <tr> <td>@country.CountryName</td> <td>@country.Capital</td> <td>@country.Population</td> <td>@country.AreaInSqKm</td> <td>@country.ContinentName</td> </tr> } </tbody> </table>

The table is designed to take all the space that is available horizontally; if you need to control the width that it takes on screen, you might want to use a container DIV and size it properly.

<divstyle="width: 560px"> <tablewidth="100%" id="my-grid" class="table table-condensed"> ... </table> </div>

There are a couple of things to do in order to enable the DataTables plugin. First off, you should invoke the plugin via JavaScript.

<scripttype="text/javascript"> $(document).ready(function () { var table = $('#my-grid').DataTable({ scrollY: "400px", scrollX: true, scrollCollapse: true, paging: false, searching: false, ordering: false, info: false, fixedColumns: { leftColumns: 1 } }); }); </script>

Second, you add the following snippet of CSS to ensure appropriate results.

<style> th, td{ white-space: nowrap; } div.dataTables_wrapper{ width: 100%; margin: 0 auto; } </style>

The scrollY attribute of the plugin sets the height of the table and determines whether a vertical scrollbar is necessary. The scrollX attribute does the same to enable horizontal scrolling if necessary. Nothing else is required and the plugin will just give you a fixed header and a vertically scrollable table. Note that, internally, the plugin does a number of things, and I strongly recommend that you set the background color of the table explicitly to avoid nasty visual effects.

The fixedColumns property in the plugin initialization code is required only if you also want locked columns that don’t scroll horizontally. The property can take two types of values. If set to a Boolean value (true) then it locks only the first column. As an alternative, you can set the property to a JavaScript object with two properties― leftColumns and rightColumns ―both accepting an integer. The integer value indicates how many columns on the left and right should be frozen. To enable column locking, you also need to include the following extension for the DataTable plugin:

<scriptsrc="~/Content/Scripts/dataTables.fixedColumns.min.js"></script>

You’ll find the link to the download right on the http://datatables.net web site. The figure below shows the plugin in action.


The Common Problems of Data Grids

If you only need to freeze the header and don’t care about locked columns during horizontal scrolling, then you can also achieve the same effect using plain CSS. In this case, though, it is required that the width of each column is indicated (or all the columns are of the same explicit size). Here’s the CSS you need.

<style> .fixed{ width: 100%; table-layout: fixed; border-collapse: collapse; } th, td{ white-space: nowrap; min-width: 400px; } thead tr{ display: block; position: relative; } tbody{ display: block; ov

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

分页:12
转载请注明
本文标题:The Common Problems of Data Grids
本站链接:http://www.codesec.net/view/533750.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(47)