jquery-bootgrid
jquery-bootgrid copied to clipboard
rstaib
Added search by columns, ie. Filtering, and more
Closes #242 Closes #241 Closes #207 Closes #50 Closes #247 Closes #175 Closes #57 Closes #143 ? Closes #266 ?
Edit 2.0 : Filtering by Columns, Constraints for column filtering, changing default sort, allow tree like structure filtering (IE showing sub elements on match), as well as pulling individual row data with ease
Needed this for a project, so I implemented it.
To search on columns you use the following functions:
* Adds a search parameter to a given column.
*
* @method addParams
* @param [phrase] {String} The phrase to search for
* @param [columnNum] {String} The string representation of the columnNumber to search on
* Removes a search parameter (or all search parameters if passed a null phrase) from a given column.
*
* @method removeParams
* @param [phrase] {String} The phrase to search for (or null to remove all)
* @param [columnNum] {String} The string representation of the columnNumber to remove from
* Removes all parameters from all columns
*
* @method clearParams
To add a greater than or less than constraint to the search instead on simple regex match
* Adds a search constraint to a given column. Currently, only greater, or anything are represented.
* IE. "Greater" is >= and "Anything else" is <=. If you need exactly equals simply add both constraints. Passing null resets the constraints
*
* @method addConstraint
* @param [constraint] {String} The type of constraint ("greater" or any other string)
* @param [columnNum] {String} The string representation of the columnNumber to apply the constraint
Use other sorting orders
* Sets the defualt sorting of the table to a new function
*
* @method setSort
* @param [sortFunction] {function} A function to be called on the elements during the default sort
* The funciton should recieve two rows and return -1, 0, 1 depending
* on the given rows.
* Sort the rows by a given function just once
*
* @method sortRows
* @param [sortFunction] {function} A function to be called on the elements during the default sort
* The funciton should recieve two rows and return -1, 0, 1 depending
* on the given rows.
To allow sub elements to match on filtering
Note: The identifier used for the table must be formatting in such a way to allow this. For example: 1, 1.1, 1.1.1, 1.2.1, 1.2.2 as identifiers would work great. If the row with identifier 1.2 matched the filters or search, then 1.2.1 and 1.2.2 would also match
* Set subtree capability flag to the table
*
* @method setSubtree
* @param [bool] {String} A string representation of a boolean value. "true" is considered true,
* all other strings are considered false.
To grab the data for a row given its identifier
* Grabs a row of data, given the rows identifier
*
* @method getRowData
* @param [rowId] {String} The rows identifier
Also, Searching via the default search bar still works after filtering. The search is simply applied to the results of the filters.
For a complete example, I will be making the project I used this on public within a few days, stay tuned:
@EdwardsNick
I am instantiating the bootgrid as follows:
$("[data-toggle=bootgrid]").bootgrid({.....
How to use your implementation?
@renerlemes AFAIK, (and I'm no expert, that's rstaib who has disappeared) you should be initializing your bootgrid like so:
var grid = $("#idOfHtmlTable").bootgrid({maybe some stuff here});
You only use "data-toggle=bootgrid" if you wanted to initialize a basic bootgrid on a html table without calling any Javascript
See the examples here: http://www.jquery-bootgrid.com/Examples
As for my own work, once the table is initialized properly, you should only have to call the functions like I showed in my pull request. If anyone finds any bugs/issues, let me know.
@EdwardsNick
I was able to use its implementation. One suggestion would be to use HTML attributes, for example: data-bootgrid-search = "1", where 1 would be the column to be searched.
So could implement in an HTML page without using JavaScript
Updated to add new stuff that was necessary for my project. I wonder if it would've been easier to go with a more complete table implementation..? haha
I'm trying to use the select and command, but seems that the click event from the rowSelect is propagating even inside another event, because I tried to use e.preventDefault() and it didn't help at all =/ I will use your ( @EdwardsNick ) versions since it seems to be the newer and faster one. But in your repo, the minified version doesn't seem to be updated. =x
@EdwardsNick: where did you end up with this?
It would be nice to see a usage example for getRowData
@bellwood I haven't looked at this code since using it last year, but it was used in a University project which can be found here: https://github.com/EdwardsNick/lackingllamas
There should be examples of using everything in that project if you search, but if you just want to see an example of what it can do without building the project, I will host it here for you: http://e7a3f6e9.ngrok.io
Github's repo search is being abhorrently annoying... Searching your repo for getRowData yields no results, grr.
If you simply had usage snippet for that one piece of functionality that would be fine vs spinning up a hosted instance, etc.
Thanks =)
@bellwood
var row = grid.bootgrid("getRowData", $(this).data("row-id")); window.location.assign("/businessplan/{{$idbp}}/"+ row.type +"/"+ row.id + "/edit");
Here I get the row data by passing in the id for the row I want. IIRC the row ids, I believe are the first column of the table. For example, if the first column you used was just indexes, you could access the first row with grid.bootgrid("getRowData", "1");
You can then access the data in the row using the name of the column id defined in the html like so:
Hopefully, that works for you. Like I said, it's been awhile since I've looked at this code.
@EdwardsNick thank you very much... This fixes so many issues accessing data =)
This is one example of a feature that I would greatly enjoy to use. Is there no way to get hold of RStaib? Someone with the right skill set maybe taking over?
@rstaib was active on Github last month. If you go to their profile page, there is a contact email you could try?