Résumé des compétences de développement EasyUI pour jQuery-js tutoriel-php.cn

Résumé des compétences de développement EasyUI pour jQuery

小云云

Libérer： 2018-02-06 09:06:01

original

1365 Les gens l'ont consulté

Cet article vous 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, vous pourrez maîtriser les compétences de développement d'EasyUI. Les amis qui en ont besoin pourront s'y référer. 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 ) Appels internes vers des 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. 🎜>

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

  }
｝);

Copier après la connexion

5. Modifier pour implémenter le chargement dynamique de la page

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

6. Ligne de mise à jour

Recommandations associées :

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

Compétences en développement EasyUI résumé

Implémentation de la mise en page EasyUI de l'exemple d'étiquette d'onglets explication détaillée

JQuery utilise EasyUi pour implémenter le partage d'exemples d'effets de liste déroulante de liaison à trois niveaux

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!