The datagrid directly edits the saved "design defect" and "datagrid defect ".

Source: Internet
Author: User

The datagrid directly edits the saved "design defect" and "datagrid defect ".

When using the datagrid component of easyUI today, I encountered some problems and recorded them so that they can be quickly solved next time.

The requirement is that a list is associated in a form, which can be added, deleted, viewed, modified

In the past, when easyUI was not used, I usually used a dialog for the page for addition and modification. After saving the page, I uploaded it to the list through ajax for submission.

Of course, I can do the same now, but I want to change the method because the datagrid of easyUI provides the function of Editing directly on the datagrid (Row Editing in DataGrid ).

I tried it according to the demo on the official website, that is, the editor application. The editing is OK.

However, the value is directly converted to text for saving, so that the value information disappears. For example, if it is a combobox, only text information is saved.

The value can always be obtained before it is saved. After a try, the first idea is to get the data from the input generated by the editor, after all, using form to submit is the most familiar method, but I found that no name is specified in the editor (maybe I don't know), so it is difficult to get data. If this is not the case, you can use the getSelected method of the datagrid to obtain the currently selected row (here you must stop the current edit (endEdit) before you can obtain the entered data ).

var row = $('#dispatches_details').datagrid('getSelected');

The row obtained here is a json object, and the combobox in it gets the value.

In this step, if the outer layer is not associated with a form (a new one is created and saved), you can directly send the row to the background to save it, after that, it is shown that only text is needed and no value information is required. This may be the original intention of the datagrid design. However, it may not take into account the slightly complex associated forms. For example, the business stored in the database must be saved together when the outer form is submitted, therefore, we need to record the data of this row for the time being.

How to record it? In js, there may be only data types that store a string of data such as array. Therefore, an array (rows) is created to save the row.

The problem arises again. How can I upload the array in js to the background? This is also a problem that has plagued me one afternoon.

First, I directly used the post server in the format of {"rows": rows} to capture the HTTP request. In fact, the request parameter sent is as follows: {rows [0] [a], rows [0] [B],... rows [1] [a], rows [1] [B] ......} where a and B are field names in row

I was very happy to see this situation. I thought that Spring could automatically bind parameters, and Baidu ran to the server.

Write down a line of code:

Public void saveDispatches (@ RequestParam ("rows []") Ddetails ddetails [])

I thought that I could directly connect to the data, and the result showed that I could not. I tried again.

Public void saveDispatches (@ RequestParam ("rows [] []") Object ddetails [] [])

Finally, directly request. getParameter ("rows [0] [a]"). This is the case, Nima. In this case, the parameter cannot be killed.

 

However, I just want to try this method. It is certainly a problem if the js array is directly transferred to the background.

 

Next, it is best to give a name for each record in the list, and the value is the row (json type ). For example, like row1: ", row2:", row3 :""

I thought it was still not feasible, because the number of parameters is uncertain and there is no good way to pick up the parameters in the background.

 

Later, I got the inspiration for passing data from form. I can use the same name and separate it with a separator. The background can get an array, but what I get in the background is the json data, you cannot directly bind parameters to objects.

However, there is another problem here. I found that when json is used as an element of array, the HTTP request will not convert itself into a string, but will use rows [a], row [B ].

This is not what we want, so we need to convert json to the string type first:

$.extend({toStr:function(json){var str = "";$.each(json, function(k,v){str += "," + k + ':"' + v + '"';});str = "{" + str.substring(1) + "}";return str;}})

When submitting the form, you can upload the data as follows:

$("#dispatches_form").form('submit', {url:'repairs/saveDispatches',    onSubmit: function(param){    param.ddetails = jsonArr.join('@');    },    success:function(data){        $.messager.progress('close');        $("#repairsPaper").dialog('close');    }});

In this way, the background will be able to receive strings in json format, and then split them into json records through @. Next

We need to manually bind the object. To prevent such a requirement, we wrote a fairly common method to bind the json and object:

public static <T> T transferFromJsonObject(Class<T> clazz,JSONObject jsonObject) {T t = null;try {t = clazz.newInstance();Field[] fields = clazz.getDeclaredFields();for (Field field : fields) {field.setAccessible(true);Object value;if ((value = jsonObject.get(field.getName())) != null&& StringUtils.isNotEmpty((String) value)) {if (field.getType() == Date.class) {SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd");value = format.parse((String) value);} else if (field.getType() == Integer.class) {value = Integer.parseInt((String) value);} else if (field.getType() == Double.class) {value = Double.parseDouble((String) value);}field.set(t, value);}}} catch (Exception e) {e.printStackTrace();}return t;}

At this point, although the process is twists and turns, it is done ~



How to save data when editing rows in easyui datagrid

Shout, save! Then, execute event processing.
 
How can we edit and save data in the datagrid in winfrom?

Private void button#click (object sender, System. EventArgs e)
{
String cnStr = "Password = qq; Persist Security Info = True; User ID = sa;" + "Initial Catalog = Northwind; Data Source = CHQHAO ";
SqlConnection cn = new SqlConnection (cnStr );
String sqlStr = "SELECT * FROM Employees ";
MyDataAdapter = new SqlDataAdapter (sqlStr, cn );
SqlCommandBuilder cb = new SqlCommandBuilder (myDataAdapter );
Ds = new DataSet ();
MyDataAdapter. Fill (ds, "Employees ");
// Bind the MERs table in the dataset to the DataGrid Control.
DataGrid1.SetDataBinding (ds, "Employees ");
}

Private void button2_Click (object sender, System. EventArgs e)
{
MyDataAdapter. Update (ds, "Employees ");
MessageBox. Show ("saved successfully! ");
}
I have something wrong with editing that piece of code. If it fails to achieve the expected results, I will not try again, so as not to make a smile. Haha.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.