Heim  >  Artikel  >  Beispiel für die gemeinsame Nutzung einer Zusammenfassung der jQuery EasyUI-Entwicklungsfähigkeiten

Beispiel für die gemeinsame Nutzung einer Zusammenfassung der jQuery EasyUI-Entwicklungsfähigkeiten

小云云
小云云Original
2017-12-27 10:32:062160Durchsuche

jQuery EasyUI ist eine Sammlung von UI-Plug-Ins, die auf jQuery basieren. Das Ziel von jQuery EasyUI besteht darin, Webentwicklern dabei zu helfen, einfacher funktionsreiche und schöne UI-Schnittstellen zu erstellen. Entwickler müssen weder komplexes Javascript schreiben, noch müssen sie über ein tiefgreifendes Verständnis der CSS-Stile verfügen. Entwickler müssen lediglich einige einfache HTML-Tags kennen. In diesem Artikel werden hauptsächlich relevante Informationen über die Entwicklungsfähigkeiten von jQuery EasyUI vorgestellt. Ich hoffe, dass jeder, der sie benötigt, darauf zurückgreifen kann.

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>
   });

1) Externer Aufruf des Tag-Inhalts innerhalb des Iframes


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

2) Interner Aufruf externe Methoden:


onclick="parent.getData();"

2. Anfrage-Einreichungsformular:


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;
    });
  }
}

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:"****************"
    }
  }]]
);

4. Bestätigungsdialogfeld:


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

  }
});

5. Bearbeiten, um dynamisches Laden von Seiten 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);
      }
  });
}

6 , Aktualisierungszeile


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

});

Haben Sie es alle gemeistert? Sammeln Sie es, wenn Sie es hilfreich finden.

Verwandte Empfehlungen:

Detaillierte Erläuterung der Anwendungsbeispiele für jQuery EasyUI-Fenster

Implementierung zeilen- und spaltenübergreifender Tabellen in der jQuery easyUI-Methode

Beispiel für ein JQuery EasyUI-Paging-Tutorial

Stellungnahme:
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