Maison > titres > le corps du texte

Exemple de partage de résumé des compétences de développement jQuery EasyUI

小云云
Libérer: 2017-12-27 10:32:06
original
2168 Les gens l'ont consulté

jQuery EasyUI est une collection de plug-ins d'interface utilisateur basés sur jQuery, et l'objectif de jQuery EasyUI est d'aider les développeurs Web à créer plus facilement de belles interfaces d'interface utilisateur riches en fonctionnalités. Les développeurs n'ont pas besoin d'écrire du javascript complexe, ni d'avoir une compréhension approfondie des styles CSS. Tous les développeurs doivent connaître quelques balises HTML simples. Cet article présente principalement des informations pertinentes sur le résumé des compétences de développement de jQuery EasyUI. J'espère que grâce à cet article, tout le monde pourra maîtriser les compétences de développement d'EasyUI. J'espère que cela pourra aider tout le monde.

Résumé des compétences de développement JQuery EasyUI

1 Lorsque vous utilisez des onglets, si vous utilisez du contenu au lieu d'une URL, vous devez intégrer l'iframe

.


addTab({
        title:node.text,
        closeable:true,
        content:‘<iframe src="&#39;+url+&#39;" frameborder="0" style="border:0;width:100%;height:99%"></iframe>
   });
Copier après la connexion

1) Appeler en externe le contenu de la balise dans l'iframe


<button onclick="console.info($(&#39;iframe&#39;).contents().find(&#39;#frameId&#39;));"/>
Copier après la connexion

2) Appeler en interne méthodes externes :


onclick="parent.getData();"
Copier après la connexion

2. Formulaire de soumission de requête :


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;
    });
  }
}
Copier après la connexion

3. Ajouter une case à cocher :


$("#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:"****************"
    }
  }]]
);
Copier après la connexion

4. >


5. Modifier pour implémenter le chargement dynamique de la page
$.messager.confirm(&#39;确认&#39;,&#39;你真的要删除吗?&#39;,function(data){
  if(data){

  }
});
Copier après la connexion


6 , ligne de mise à jour
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);
      }
  });
}
Copier après la connexion



Vous l'avez tous maîtrisé ? Récupérez-le si vous le trouvez utile.

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

});
Copier après la connexion
Recommandations associées :


Explication détaillée des exemples d'utilisation de la fenêtre jQuery EasyUI

Implémentation de tableaux inter-lignes et inter-colonnes dans la méthode jQuery easyUI

Exemple de tutoriel de pagination Jquery easyui

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal