I have an example working here - http://jsfiddle.net/BM3kX/5
It has a piece of JSON consumed by a YUI DataTable. I have a few queries regarding the same.
The JSON has a 'imageURI' attribute from which I need to render an image [16x16] along with the 'showName' attribute in the same cell. Also, the table can have multiple rows so as the images that should be rendered on each row efficiently.
When I click on a row, the table should alert me of the selected record. But there is a twist here - I need the data exactly as the JSON which is used to render it. (I should get even the 'type' attribute even if I'm not using it anywhere in my table.)
How can I meet the above requirements? Any solutions or possibilities?
1) There is not much you can do there. I assume the images are different for each of the records so there is not a lot to optimize except sending the images in the proper size instead of having the client resize them. If the images were some sort of icons representing status, I would recommend you sent the status coded somehow and let the browser decide on how to represent it, but if they are pictures of the people, you'll just have to let the browser deal with them the best it can.
2) It is easy to reconstitute the original data out of the model for the clicked row. You don't need to keep a copy of the JSON for that row, you can turn it into JSON whenever you want (after all, model has a toJSON method to make that easy). The model for each record in a table can hold more information than that shown in the table. The column property tells the datatable what to show, the datasource what it stores. Use getRecord to reach the underlying model and JSON-encode that. If the type was there originally, it will still be there even if you don't show it.
Related
Situation:
I'm playing a little by using the Matt Kruse's library I found at the page Table Sorting, Filtering, Etc at the URL http://javascripttoolbox.com/lib/table/source.php.
It works pretty well but I wish to implement a little improvement (maybe it would be better to use the locution "new feature") and I don't know where to start because I'm a newbie in js and that js file uses more advanced programming statements I don't fully understand, not yet at least.
I have a single html file with some tables in it. Some of them are filterable and sortable thanks to that library. The number of tables may vary, the number of columns (fields) in each table may vary as well, and the number of records (rows) of each table may vary as well too. Of course the content is different in each table too.
By placing a specific css class in the th element of the targeted column I choose, I indicate to the Matt Kruse's library to create in that column a html element that is populated of a list of html elements that are computed dynamically by the js it self by picking a distinct and sole value of each record for that column.
When I wish to apply a filter to the table on the basis of certain column, I have just to choose the relative from the corresponding box and the table gets filtered accordingly, as I expect to. It works just hiding the records (the html rows) with not matching criteria in that specific column with a filter applied on it. Of course it is possible to use filters on more than one column at once if needed. It works pretty similarly to MS Excel.
The problem
When I apply a filter to a column the other columns filter drop-down combo boxes (the html elements that contain the compiled options for filtering other columns) continue to show all options instead of hiding those that are filtered in the table and are no more needed. So it becomes pretty tricky especially on complex tables to choose filtering criteria from other columns because the user has to understand by himself what are the criteria that aren't usable because the corresponding rows are already hidden by a filter already applied to another column.
One more thing: when I edit the content of one or more table cells, the filter of the relative column(s) doesn't update to match the editing made, but it seems to be to stay static.
Goal of this question
If I use a spreadsheet (as LibreOffice Calc, or MS Excel, or Google online spreadsheet, or else) when I filter a column other columns' filter drop down menu are filtered as well. If I remove a filter somewhere, other columns filters drop down are updated accordingly.
All this behavior is what I would like to implement into Matt Kruse's library. In this way it would be easier to filter by multiple columns because the boxes containing the filter criteria of the other columns will show just the filter criteria left by the all the previously applied filters.
What I have already tried
I tried to implement something to do that but it was so slow that I was too much ashamed of its execution time that I already deleted the whole algorithm I created.
For comparison using the Matt Kruse's library algorithm implies just few instants to compile all tables data into filter elements (on all tables as well). But the algorithm I've implemented needed more than 30-40 seconds for just one table. Way too inefficient.
Substantially I wrote few "for loops" that for each into each of the filtered table, compares the value of the option with each one of the corresponding column and if finds a mach keeps the option visible, else it hides that element into the . I attached that algorithm to the change event of each , so when I clicked and selected the the event was triggered and all the content of the table was updated. It worked as expected but, as I said, what I implemented was way slower.
So the question is:
How do I modify the Matt Kruse's js file to implement the feature I want keeping the highest possible performance?
(If Matt Kruse is reading this, feel free to pick up this idea and implement the new features needed above: I'm sure it would be greatly appreciated).
Thanks everybody in advance for the contribution.
As a manufacturing company we measure and record data for the parts we make. Up to now these have been recorded on a spreadsheet, Drawing dimensions entered in one column and actual measured value in another, and thus the cell where actual measured value is entered changes background colour to show if within allowed dimension
In excel this can be set up so happens dynamically.
Can this be done on HTML table as and when information is entered.
This is a vague question, but I can try giving you an answer.
A decent solution might be to attach some Angular.js code to the HTML table so that it updates from an SQL database. Pulling code from the database where you'll update with the values you want to input, and it will automatically update the HTML table(this is because angular.js is mostly used edit DOM elements).
You'll be able to create/call javascript/jQuery functions as well that can evaluate whether or not the data is within the specified parameters, have it send the result to your angular function and change the attributes of the table so that the CSS can choose what colour the data row should be.
I am looking for a way to sort columns programmatically.
Please bare in mind, I do not mean to sort the grid as you normally would with sortGrid() or whatnot. I mean to arrange the row order from left to right programmatically, after the grid has been rendered.
So, I am aware that with:
$("#myGrid").jqGrid({sortable: true});
I am able to sort the columns by dragging and dropping them in order. The idea is to allow users to sort their column, and to have a callback save the order in the database, so each user can arrange their own columns however they want.
I am doing something similar with showing and hiding columns, but have been unable to reorder the columns programmatically without actually dragging and dropping them.
Any help would be highly appreciated.
You can use remapColumns method to reorder the column programmatically without usage drag & drop.
In the answer you will find the code which shows how to save user specific choice of the column order in localStorage. I personally prefer the way as the saving of the same information on the server side in the database. Nevertheless you can implement saving of the same information in the database instead of localStorage. To do this you need just change the implementation of saveObjectInLocalStorage and getObjectFromLocalStorage functions and include the ajax call instead of usage window.localStorage.
I am porting quite a huge piece of software to an ExtJS Grid. Lots of data (and I mean lots of data) is loaded on-demand into spans that are placed inside grid's cells.
Imagine grid cells having <span id="foo_bar'></span> as content, and special ajax handlers are polling the backend for updated information and once available the spans are filled with it.
Now, in case I collapse some part of the grid and then re-exand them again I loose all automatically filled cell content, and am left with empty spans (which I started from in the first place).
I know the correct way is to setup a store and push all data into the store. But as I've mentioned above: I am porting quite a huge piece of legacy software to ExtJS, and I do not really have much choice here.
Is there a way to automagically push grid cell values to the store?
Update:
A grid is loaded with, suppose, 2000 cells (this can vary tremendously). Every cell contains various grades of HTML, mostly this is , but this can be pretty much anything (including several spans or divs in one cell). In the background there is a comet process pushing new data to the HTML page almost in real time. This data is populated to the corresponding SPANS and DIVs either based on their IDs or class or both.
What I want to achieve is that either:
a) the model for the grid is atomagically updated with the new html content of the cells (how can I achieve this)?
b) when collapsing/expanding tree's nodes the model data is NOT reloaded afresh.
Is either a or b possible? if so — how?
Just update your store when the 'special ajax handlers' successfully return values. In staid of manually messing with the dom.
so in the success callback do something like -> loadData()
Edit:
Seems like you are working with very bad legacy code :) If adding a simple line of code to the ajax handler is a tremendous effort.. You can however attach dom listeners, but it's very bad practice. Here are some events to listen to
Edit:
Here is an example of the use of how you could listen to dom events, it's rather a pure js solution but, meh.. it works..
I need some conceptual help:
I am trying to display a page that contains a single table with a lot of data (moderately big number of rows, very big number of columns), and I want that page to be as fast and smooth as possible from the user's point of view. What I am doing is the following:
Retrieve a list containing the database primary keys of the elements to be displayed in the table.
Iterate through the list, asynchronously request each element given its primary key, and, every time element is retrieved, add it to the table.
Each of these retrieval operations is implemented as a Web service call.
Now my questions are the following:
How can I reorder the elements if they arrive in a different order than they were requested? (It is absolutely essential for me that these elements be inserted in the table in the same positions as their respective primary keys were in the original list.)
Can this strategy be made compatible with any of the main JavaScript grid controls available out there? (Without me having to modify or understand how these controls internally work, of course.)
I think you can look into the jQuery DataTables plugin. It is quite a powerful tool to display data in a tabular format.