Exemple de partage de résumé des compétences de développement jQuery EasyUI-titres-php.cn

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

小云云

Libérer： 2017-12-27 10:32:06

original

2184 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