Heim > Web-Frontend > js-Tutorial > Zusammenfassung der EasyUI-Entwicklungsfähigkeiten für jQuery

Zusammenfassung der EasyUI-Entwicklungsfähigkeiten für jQuery

小云云
Freigeben: 2018-02-06 09:06:01
Original
1363 Leute haben es durchsucht

Dieser Artikel stellt Ihnen hauptsächlich relevante Informationen zur Entwicklung von jQuery EasyUI vor. Ich hoffe, dass Sie durch diesen Artikel die Entwicklungsfähigkeiten von EasyUI beherrschen können alle.

Zusammenfassung der JQuery EasyUI-Entwicklungsfähigkeiten

1. Wenn Sie bei der Verwendung von Registerkarten Inhalte anstelle einer URL verwenden, müssen Sie Iframe einbetten


addTab({
        title:node.text,
        closeable:true,
        content:‘<iframe src="&#39;+url+&#39;" frameborder="0" style="border:0;width:100%;height:99%"></iframe>
   });
Nach dem Login kopieren

1) Den Tag-Inhalt im Iframe extern aufrufen


<button onclick="console.info($(&#39;iframe&#39;).contents().find(&#39;#frameId&#39;));"/>
Nach dem Login kopieren

2 ) Interne Aufrufe externer Methoden:


onclick="parent.getData();"
Nach dem Login kopieren

2. Formular zur Abfrageübermittlung:


function serarchFun(){//搜索
  $("#datagrid").datagrid("load", serializeObject($("#searchForm")));
}
function cleanFun(){//清空
  $("#searchForm input").val(&#39;&#39;);
  $("#datagrid").datagrid("load", {});
}

function removeFun(){//删除
  var rows=$("#datagrid").datagrid("getChecked");
  var ids[] = new Array();
  if(rows.length>0){
    for(var i=0;i<rows.length;i++){
      ids.push(row[i].id);
    }
    $.ajax({
      url:&#39;${rootPath}/user_delete.action&#39;,
      data:{ids:ids.join(&#39;,&#39;)},
      dataType:&#39;json&#39;,
      success:function(data){
        $(&#39;#datagrid&#39;).datagrid(&#39;load&#39;);
        $(&#39;#datagrid&#39;).datagrid(&#39;unselectAll&#39;);
        $.messager.Show({
          title:&#39;提示&#39;,
          msg:data.msg
        });
      }
    })
  }else{
    $.messager.Show({
      title:&#39;提示&#39;,
      msg:&#39;不能删除&#39;
    });
  }
}
Nach dem Login kopieren

3. Kontrollkästchen hinzufügen:


$("#datagrid").datagrid(

  url:"${rootPath}/user_add.action",
  idField:&#39;id&#39;,
  checkOnSelect:false,
  selectOnCheck:true,//选中复选框选中
  frozonColumns:[[{
    field:&#39;id&#39;,
    title:&#39;编号&#39;,
    width:150,
    checkbox:true
    },{
    field:&#39;name&#39;,
    title:&#39;登陆名称&#39;,
    width:150,
    sortable:true
  }]],
  columns:[[{
    field:&#39;pwd&#39;,
    title:&#39;密码&#39;,
    width:150,
    formatter: function(){
      return:"****************"
    }
  }]]
);
Nach dem Login kopieren

4 🎜>


$.messager.confirm(&#39;确认&#39;,&#39;你真的要删除吗?&#39;,function(data){
  if(data){

  }
});
Nach dem Login kopieren
5. Bearbeiten, um das dynamische Laden der Seite zu implementieren


function editFun(){
var rows=$("#datagrid").datagrid("getChecked");
  $(&#39;<p/>&#39;).dialog({
    width:500,
    height:200,
      href:&#39;${rootPath}/edit.jsp,
      modal:true,
      title:&#39;编辑用户&#39;,
      buttons:[{
        text:编辑,
        handler:function(){
            $(&#39;#editForm&#39;).form(&#39;submit&#39;,{
              url:&#39;${rootPath}/user_edit.action&#39;,
              success:function(data){
                var obj = JQuery.parseJSON(data);
                if(obj.success){
                  $(&#39;#edit_dialog&#39;).dialog(&#39;close&#39;);
                }
                $.messager.show({
                  title:&#39;提示&#39;,
                  msg:obj.msg
                });
              }
            }
        }
      }],
      onClose:function(){//必须写的
        $(this).dialog(&#39;destroy&#39;);
      },
      onOpen:function(){
        var data = rows[0];
      },
      onLoad:function(){//初始化数据,填充数据
        var data = rows[0];
        $("#editForm").form("load", data);
      }
  });
}
Nach dem Login kopieren
6. Zeile aktualisieren



Verwandte Empfehlungen:
var rows=(‘#datagrid&#39;).datagrid(‘getChecked&#39;);(‘#datagrid&#39;).datagrid(‘updateRow&#39;,{ 
index:$(‘#datagrid&#39;).datagrid(‘getRowIndex&#39;,rows[0]), 
row:result.obj

});
Nach dem Login kopieren


EasyUI-Entwicklungsfähigkeiten Zusammenfassung

EasyUI-Layout-Implementierung von Beispielen für Registerkartenbeschriftungen, detaillierte Erklärung

JQuery verwendet EasyUi, um die gemeinsame Nutzung von Drop-Down-Box-Effekten mit dreistufiger Verknüpfung zu implementieren

Das obige ist der detaillierte Inhalt vonZusammenfassung der EasyUI-Entwicklungsfähigkeiten für jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage