JSF - Highlight changed data in table (within transaction) Reusable framework
While implementing a data entry utility, I was given the need to highlight fields in a table whose values were changed by that transaction. (Not all fields in the table are required to change)
A reusable framework for this could replicate the same functionality for similar utilities/transactions without the replicated cost of a "one off" solution. It could be even more useful, if easy to add to already existing flows. I'm looking to implement a framework like this in JSF 1.1. While much of this may involve altering / changes the common components already developed, I feel there is probably a universal approach.
In my particular cirumstance I have reusable table builders, and a navigation/transaction framework.
Possible approaches:
Purely server side. Cache the databean from the prior state. Loop through and do a compare. Somehow exploit the bindings to the data fields to 开发者_C百科go back to the components and trigger their highlighting? (Or have the components look up the beans based on the navigation xml and trigger their own highlighting for just their field.)
Do more of a client side approach. Edit components would know their prior state and know the value of their input. Compare and trigger highlighting. Not sure how this would be passed to the next page / state.
General ideas and partial solutions. are welcome. Also any info on if this is available in other frameworks (Grails?). (The easiest way to do something is look at how its already been done!)
Thanks for any help / speculation / good brainstorming!
Doing this clientside is much easier and user-friendlier.
When considering jQuery JS framework, this is as easy as:
$(':input').each(function() {
$(this).attr('data-original', $(this).val()).change(function() {
$(this).toggleClass('changed', $(this).val() != $(this).attr('data-original'));
});
});
in combination with this CSS example:
.changed { background: #fee; }
Here's a working SSCCE. Copy'n'paste'n'run it to see it yourself.
<!DOCTYPE html>
<html lang="en">
<head>
<title>SO question 3170317</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
$(':input').each(function() {
$(this).attr('data-original', $(this).val()).change(function() {
$(this).toggleClass('changed', $(this).val() != $(this).attr('data-original'));
});
});
});
</script>
<style>
.changed { background: #fee; }
</style>
</head>
<body>
<form>
<input value="change">
<input value="those">
<input value="inputs">
</form>
</body>
</html>
(if you'd like to let it listen on every keypress instead of change and blur, just replace change part in the 2nd JS line by keyup, here's a live demo using keyup)
加载中,请稍侯......
精彩评论