PHPRUNNER: menampilkan tampilan grid seperti Excel dalam aplikasi Anda

Some applications may require to provide users with quick editing capabilities. While Inline Edit does just that entering inline edit mode for multiple records can be painful. It would be much easier is some or all fields appear as edit controls when page is loaded.

While PHPRunner/ASPRunner.NET/ASPRunnerPro do not have such functionality built-in it's fairly easy to implement it in your project. In this sample project we'll show how to make fields ProductName, UnitPrice and Discontinued editable automatically. For now we only support text boxes and check boxes. Data is saved automatically once you leave the text box or check off check box. To see that data is actually saved in the database simply reload the page.

You can also see how server-side validation works. Enter Unit Price that is less than $20 and move to the next field to see it in action. Record won't be saved until you enter $20 or more price value.

Live demo

Here is how this can be done.

1. 'View as' Custom

For each field that you want to edit on the List page set 'View as' type 'Custom'. The code below is for PHPRunner only now but we'll update it with ASP/C# code shortly.

Check box field code

1. $field="Discontinued";  
2. $keyField="ProductID";  
3.   
4. $value = "<input data-fieldname='".$field."' type=checkbox data-editid='".  
5. $data[$keyField]."' class='chAutoUpdate' ";  
6. if ($data[$field])  
7.     $value.="checked ";  
8. $value.=">";  

Text box field code

1. $field="ProductName";  
2. $keyField="ProductID";  
3. $value = "<input data-fieldname='".$field."' data-editid='".$data[$keyField]."' 
4. type=text class='txtAutoUpdate' value=\"".runner_htmlspecialchars($data[$field])."\">";  

Obvious changes are field name and key column name. You can also change field styling, width etc.

2. List page Javascript OnLoad code

1. var elem;  
2. $(document).ready(function() {  
3.  $('.chAutoUpdate').change(function() {  
4.     var id = $(this).attr("data-editid");  
5.     var field=$(this).attr("data-fieldname");  
6.     var val="";  
7.     elem = $(this);  
8.         if($(this).is(":checked")) {  
9.             val="on";  
10.         }  
11.   
12.     var data = {  
13.         id: 1,  
14.         editType: "inline",  
15.         a: "edited",  
16.         editid1: id  
17.     };  
18.     data["value_"+field+"_1"]=val;  
19.     data["type_"+field+"_1"]="checkbox";  
20.   
21.     // save data  
22.   
23.     $.ajax({  
24.       type: "POST",  
25.       url: "products_edit.php?submit=1",  
26.       data: data  
27.         }).done(    function(jsondata) {  
28.             var decoded = $('<div/>').html(jsondata).text();  
29.             response = jQuery.parseJSON( decoded );  
30.             if (response["success"]==false) {  
31.                 $("<div class=rnr-error/>").insertAfter(elem).html(response["message"]);  
32.             }  
33.         });  
34.     });  
35.   
36.  $('.txtAutoUpdate').change(function() {  
37.   
38.     var id = $(this).attr("data-editid");  
39.     var val=$(this).val();  
40.     var field=$(this).attr("data-fieldname");  
41.     elem = $(this);  
42.     var data = {  
43.         id: 1,  
44.         editType: "inline",  
45.         a: "edited",  
46.         editid1: id  
47.     };  
48.     data["value_"+field+"_1"]=val;  
49.   
50.     // clear error message if any  
51.     if ($(this).next().attr('class')=="rnr-error")  
52.             $(this).next().remove();  
53.   
54.     // save data  
55.     $.ajax({  
56.       type: "POST",  
57.       url: "products_edit.php?submit=1",  
58.       data: data  
59.         }).done(    function(jsondata) {  
60.             var decoded = $('<div/>').html(jsondata).text();  
61.             response = jQuery.parseJSON( decoded );  
62.             if (response["success"]==false) {  
63.                 $("<div class=rnr-error/>").insertAfter(elem).html(response["message"]);  
64.             }  
65.         });  
66.     });  
67. });  

Changes in the code above: replace products_edit.php with the name of your edit page.

3. Validation part

This part is optional but we post it to make example complete. This code can be pasted to BeforeEdit event and we make sure that price is $20 or greater.

1. if (array_key_exists("UnitPrice", $values) ) {  
2.     if ($values["UnitPrice"]<20.0) {  
3.         $message="Price should be greater than 20.0";  
4.         return false;  
5.     }  
6. }  
7. return true;