EasyUI dynamically adds the LinkButton on the Panel, easyuilinkbutton

EasyUI dynamically adds the LinkButton on the Panel, easyuilinkbutton

In a recent project to renovate the old system, the panel of Easyui was studied in order to display the position and original system, add the Linkbuton button Edit Method dynamically in the panel. Make a record here so that you do not forget it later. Also, specify a line for the person in need, and the code is messy, please forgive me for your patience. You can achieve this without high requirements.

Let's get down to the truth. The requirement is as follows.

It seems simple. You just need to add the linkbutton tag to the title of the panel cyclically. In fact, there are still many problems that need to be addressed. I will briefly describe my ideas and steps.

1. The receiving type of the title attribute of the panel is string, so I thought of retrieving data in the background, splicing it into a string, and then assigning a value to the title,

2. When I obtain the data asynchronously and want to extract the obtained value and use it in another method, I find that the data cannot be obtained. The faulty node, asynchronous; change to the number of synchronously obtained data to solve the problem;

3. After dynamically adding the obtained data to the title of the panel, check that the data has been added but it has no effect. Problem: rendering problem, solution, only the <a> label is defined in panel, and easyui effect is not attached,

Add easyui effect separately. OK. Now the problem is solved.

Well, it seems simple, it includes a lot of debugging and check operations before implementation. If you can see a good person, give me some advice to the younger brother. Let's not talk much about it. Show Code Time

// Onload event $ (function () {// the development method is Asp.net MVC. Use the access page to obtain the Access Controller name var controllerName = "@ ViewContext. routeData. values ["controller"]. toString (). toLower () "; LoadDataAndColumnsName (controllerName); LoadButtonInfo (controllerName );})

Var toolbar = []; // obtain the title data function LoadDataAndColumnsName (cname) {$. ajax ({type: "post", url: '/' + cname. toString () + '/GetCommand', contentType: "application/json; charset = UTF-8", dataType: "json", async: false, success: function (data) {Callback (data) ;}, error: function (data) {alert ("error ");}})} // place the data in the Callback function to the title of the Panel. function Callback (json) {var data = json; toolbar = data. toolbar; var buttons = "<span class = 'splitcss '>|</span> <span class = 'desc'> SIM card Settings </span> <span class = 'splitcss'> | </span> "; $. each (data. toolbar, function (I, item) {buttons + = "<a class = 'panel _" + item. btnName + "'id = '" + item. btnName + "'style = 'margin-top:-5px; 'onclick = 'operaction (" + item. btnName + "); '> </a>" ;}) // load Panel $ ("# contentDiv "). panel ({title: buttons, height: $ (window ). height ()} // render the linkbutton function LoadButtonInfo (cname) {$. each (toolbar, function (I, item ){
// In this way, the loading button solution comes from the network and the connection cannot be found. Thank you for your $ ("# contentDiv "). panel ('header '). find ('a. panel _ '+ item. btnName + ''). linkbutton ({iconCls: 'icon-'+ item. btnIcon + '', text: item. btnCaption, plain: 'true'}) $ ('#' + item. btnName + ''). bind ('click', function () {OperAction (item. btnName, cname );})})}

Well, it should be displayed. I can do it here. The OperAction function is the function triggered when the linkbutton is clicked to complete the corresponding operation. This is the end of the article. If you don't like it, do not try it.