動的easyuiコントロールの追加
7319 ワード
jqueryはappend,appendToメソッドを提供し,静的htmlテキストを動的に追加することができ,easyuiでeasyuiコントロールを動的に追加するにはどうすればよいかを紹介する.
使用方法:静的htmlの追加と同様に、追加後に$を呼び出す必要があるだけです.parser.parse()はページをレンダリングします.
使用方法:静的htmlの追加と同様に、追加後に$を呼び出す必要があるだけです.parser.parse()はページをレンダリングします.
1 function createPanel(container) {
2 var icon = 'layout-button-down';
3
4 var p = $('<div></div>').appendTo($(container)).panel({
5 cls: 'easyui-panel',
6 title: 'lname',
7 closed: false,
8 width: $(container).width(),
9 iconCls: 'icon-save',
10 doSize: false,
11 tools: [{
12 iconCls: icon,
13 handler: function () {
14 $(p).toggle("slow");
15 }
16 }]
17 }).css('display','block');
18 return p;
19 // $(container).append('<div class=\"easyui-panel\" title=\"My Panel\" style=\"width:500px;height:150px;padding:10px;\" data-options=\"iconCls:\'icon-save\',closable:true, collapsible:true,minimizable:true,maximizable:true\"></div>');
20 }
21 function createContentPanel(container, para) {
22 var parent=$('<div class=\"easyui-panel\" ></div>');
23 $.each(para,function(i,n)
24 {
25 $(parent).append('<div><label for=\"'+n.name+'\"> :</label> <input class=\"easyui-validatebox\" type=\"'+n.type+'\" name=\"'+n.name+'\" data-options=\"required:true\" /> </div> <div>');
26 });
27 $(container).append(parent);
28
29 }
30
31 $.fn.cform = function (para) {
32 try {
33 var forms = $('<form action=\'\'></form>');
34 for (var j = 0; j < 3; j++) {
35 var panels = [];
36 for (var i = 0; i < 3; i++) {
37 var obj =
38 {
39 'name': para.name,
40 'type': para.type
41 };
42 panels.push(obj);
43 }
44 createPanel($(forms));
45 createContentPanel(forms, panels);
46 }
47
48 $(this).append($(forms));
49
50 $.parser.parse();
51 } catch (e) {
52 alert(e);
53 }