SlickGrid 编辑器编写指引
来源:互联网 发布:sql server 2005 网盘 编辑:程序博客网 时间:2024/04/29 16:02
一篇不错的文章,编写SlickGrid的编辑器可以参考,思路更加清楚。
原文地址:
http://onmylemon.co.uk/2014/06/writing-an-editor-for-slickgrid/
Writing an Editor for SlickGrid
SlickGrid is a data grid used to display tabular information is a user and programmer friendly way. In recent months I have become possibly too familiar with SlickGrid and although it can be annoying on occasion, I have to admit it is a well written and executed Javascript library.
How SlickGrid handles data
SlickGrid makes use of a data provider called the DataView and the grid itself, called the DataGrid. The DataView is responsible for holding the data for all the cells in the table, it is possible to implement your own DataView as long as you make certain methods available via a public api. Both the DataView and the DataGrid provide events that can be used to trigger updates of the data, column information or any other aspect of either view or grid.
The editor used for a particular cell is defined in the definition of the column that cell is in, here is an example making use of validation, an editor, and a formatter to manipulate and display the data in each cell.
Structure of an Editor
A SlickGrid editor is a function that implements certain methods in order to provide a way of editing data stored in the grid and passing that information back to the data view. The methods that it must make publicly available are:
- destroy – Remove all DOM elements, events and data created by the constructor
- focus – Used to set input focus
- isValueChanged – Returns a boolean if the value has been changed by the editor
- serializeValue – Returns a serialized version of the data from the editor
- loadValue – Updates the value of the input or any other field after the editor is initialised
- applyValue – Sets the value in the grid data once the editor has been destroyed
- validate – Validate user input using any method wanted, returns and object with valid: boolean and msg: string
There are a few optional methods you can implement as well:
- show – Triggered when a cell being edited is scrolled into view
- hide – Triggered when a cell being edited scrolls out of view
- position – Triggered when scrolling the grid
As long as you pass a constructor function that implements the required methods you have created a SlickGrid editor
The most basic editor
The most basic of editors is one that just provides a form input for information to be entered and stored in the view and grid when exiting the field. This is pretty much lifted straight from the SlickGrid in built editor file.
Exposing the editor
To be used in SlickGrid an editor needs to be exposed globally under the window object, to do this you need to first create your editor constructors then extend them to the window.Slick.Editors object.
Using a base constructor
Through experience I have found that using a constructor as a base and extending other editors from that is a great way to write editors for SlickGrid. Firstly you need to write your base editor, it needs to implement all of the required methods as prototypes that can be overwritten by individual editors. Firstly lets create the base editor constructor and extend Slick.Editors with it.
Now we have this in place we can set the prototypes for the BaseEditor constructor like this. I have not included the full methods for ease of reading, unless they are required, you can assume that it implements them in the same way as the basic editor above.
The next step is to create our first editor, a simple text editor that will render an input field in the cell. When doing this we will extend the functionality of the BaseEditor constructor so we have a solid base to start from. Notice that as our BaseEditor implements a basic text editor we really don’t need to be a lot, other than set arguments and run the init() method.
More than an input
So really we want to do a little more than just show an input field, otherwise what is the point in using inheritance and prototyping to get the job done. Firstly we need to alter our init() prototype method, it needs to run a setup method if it is available, allowing us to do any extra initialisation we might want.
We can now write something a little more useful, lets start with a date picker making use of thebootstrap datepicker plugin. First we need to create the new constructor DatePickerEditor then specify our setup method, we also need to overwrite the destroy method as our datepicker will need to manually be destroyed.
If you want to use this datepicker we would then set it in the column definition.
The finished product
And now the finished product, a base constructor for SlickGrid editors plus a DatePicker and Text editor.
- SlickGrid 编辑器编写指引
- SlickGrid的自定义cell编辑器对象接口
- SlickGrid example 4: 过滤
- SlickGrid 基本方法篇
- slickgrid 的配置问题
- slickgrid表格控件
- SlickGrid 基本方法篇
- Web表格控件 SlickGrid
- 自己编写行编辑器
- 拓扑编辑器的编写
- Unity3D编辑器插件编写
- Unity3D编辑器插件编写
- Unity3D编辑器插件编写
- 编写《编辑器》阶段小结
- SlickGrid的web表格控件
- SlickGrid example 6:Ajax加载
- SlickGrid example 8:折线图
- SlickGrid example 7:鼠标事件
- 解决SQLSERVER在还原数据时出现的“FILESTREAM功能被禁用”问题
- iOS推送 (百度推送)
- 离职后,失业金领取流程记录(杭州工作)
- 工作周报045
- Android基础系列-----------Intent简析
- SlickGrid 编辑器编写指引
- C++的字符串分割函数
- 解决eclipse连接不到genymotion的问题
- 关于对数复杂度
- C#设计模式-原型模式
- 如何删除mysql-bin.0000X 日志文件呢?
- 【c++】浅拷贝成功__count解决
- 测试博文测试博文
- [每日一记]php访问mysql