jQuery EasyUI开发技巧总结

来源:爱站网时间:2020-05-29编辑:网友分享
jQuery EasyUI的目标是帮助web开发人员更容易地创建一个丰富而漂亮的UI界面,也可以说是一个集合体,下面是爱站技术频道为大家带来的jQuery EasyUI开发技巧总结,希望大家通过我们的介绍都能掌握。​​​​​​​

jQuery EasyUI的目标是帮助web开发人员更容易地创建一个丰富而漂亮的UI界面,也可以说是一个集合体,下面是爱站技术频道为大家带来的jQuery EasyUI开发技巧总结,希望大家通过我们的介绍都能掌握。

jQuery EasyUI开发技巧总结

1、使用tabs时,如果使用的不是url,而是content,则要嵌入iframe

addTab({
        title:node.text,
        closeable:true,
        content:‘
   });

1)外部调用iframe里面的标签内容

2)内部调用外部的方法:

onclick="parent.getData();"

2、查询提交表单:

function serarchFun(){//搜索
  $("#datagrid").datagrid("load", serializeObject($("#searchForm")));
}
function cleanFun(){//清空
  $("#searchForm input").val('');
  $("#datagrid").datagrid("load", {});
}

function removeFun(){//删除
  var rows=$("#datagrid").datagrid("getChecked");
  var ids[] = new Array();
  if(rows.length>0){
    for(var i=0;i

3、添加checkbox:

$("#datagrid").datagrid(

  url:"${rootPath}/user_add.action",
  idField:'id',
  checkOnSelect:false,
  selectOnCheck:true,//选中复选框选中
  frozonColumns:[[{
    field:'id',
    title:'编号',
    width:150,
    checkbox:true
    },{
    field:'name',
    title:'登陆名称',
    width:150,
    sortable:true
  }]],
  columns:[[{
    field:'pwd',
    title:'密码',
    width:150,
    formatter: function(){
      return:"****************"
    }
  }]]
);

4、确认对话框:

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

  }
});

5、编辑实现动态加载页面

function editFun(){
var rows=$("#datagrid").datagrid("getChecked");
  $('
').dialog({ width:500, height:200, href:'${rootPath}/edit.jsp, modal:true, title:'编辑用户', buttons:[{ text:编辑, handler:function(){ $('#editForm').form('submit',{ url:'${rootPath}/user_edit.action', success:function(data){ var obj = JQuery.parseJSON(data); if(obj.success){ $('#edit_dialog').dialog('close'); } $.messager.show({ title:'提示', msg:obj.msg }); } } } }], onClose:function(){//必须写的 $(this).dialog('destroy'); }, onOpen:function(){ var data = rows[0]; }, onLoad:function(){//初始化数据,填充数据 var data = rows[0]; $("#editForm").form("load", data); } }); }

6、更新行

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

});

上述是爱站技术频道小编为大家带来的jQuery EasyUI开发技巧总结,很多程序员在实践操作中的能力还是有限的,这个时候我们就要不断学习了。

上一篇:详解webpack 如何集成第三方js库

下一篇:Bootstrap一款超好用的前端框架

您可能感兴趣的文章

相关阅读

热门软件源码

最新软件源码下载