Summary of EasyUI development skills-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Summary of EasyUI development skills

Jan 31, 2018 pm 02:17 PM

easyui develop Summarize

This article mainly introduces relevant information about the summary of jQuery EasyUI development skills. I hope that through this article, everyone can master the development skills of EasyUI. Friends who need it can refer to it. I hope it can help everyone.

jQuery EasyUI development skills summary

1. When using tabs, if you use content instead of url, you must embed iframe

addTab({
        title:node.text,
        closeable:true,
        content:‘&lt;iframe src=&quot;&#39;+url+&#39;&quot; frameborder=&quot;0&quot; style=&quot;border:0;width:100%;height:99%&quot;&gt;&lt;/iframe&gt;
   });

Copy after login

1) External call to the tag content inside the iframe

1	`<button onclick="console.info($('iframe').contents().find('#frameId'));"/>`

Copy after login

2) Internal call External method:

1	`onclick="parent.getData();"`

Copy after login

2. Query submission form:

function serarchFun(){//搜索
  $(&quot;#datagrid&quot;).datagrid(&quot;load&quot;, serializeObject($(&quot;#searchForm&quot;)));
}
function cleanFun(){//清空
  $(&quot;#searchForm input&quot;).val(&#39;&#39;);
  $(&quot;#datagrid&quot;).datagrid(&quot;load&quot;, {});
}
 
function removeFun(){//删除
  var rows=$(&quot;#datagrid&quot;).datagrid(&quot;getChecked&quot;);
  var ids[] = new Array();
  if(rows.length&gt;0){
    for(var i=0;i&lt;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;
    });
  }
}

Copy after login

3. Add checkbox:

$(&quot;#datagrid&quot;).datagrid(
 
  url:&quot;${rootPath}/user_add.action&quot;,
  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:&quot;****************&quot;
    }
  }]]
);

Copy after login

4. Confirmation dialog box:

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

Copy after login

5. Edit to implement dynamic loading of the page

function editFun(){
var rows=$(&quot;#datagrid&quot;).datagrid(&quot;getChecked&quot;);
  $(&#39;&lt;p/&gt;&#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];
        $(&quot;#editForm&quot;).form(&quot;load&quot;, data);
      }
  });
}

Copy after login

6. Update row

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

Copy after login

Related recommendations:

Develop the use of attachment upload component uploadify based on MVC4+EasyUI

The above is the detailed content of Summary of EasyUI development skills. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn