easyui php 例子,实例分享jQuery EasyUI开发技巧总结

jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。本文主要介绍了jQuery EasyUI开发技巧总结的相关资料,希望通过本文大家能够掌握EasyUI的开发技巧，需要的朋友可以参考下，希望能帮助到大家。

jQuery EasyUI开发技巧总结

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

addTab({

title:node.text,

closeable:true,

content:‘

});

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

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

οnclick="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

ids.push(row[i].id);

}

$.ajax({

url:'${rootPath}/user_delete.action',

data:{ids:ids.join(',')},

dataType:'json',

success:function(data){

$('#datagrid').datagrid('load');

$('#datagrid').datagrid('unselectAll');

$.messager.Show({

title:'提示',

msg:data.msg

});

}

})

}else{

$.messager.Show({

title:'提示',

msg:'不能删除'

});

}

}

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");

$('

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

});

大家都掌握了吗？觉得有帮助的赶紧收藏起来吧。

相关推荐：

本文原创发布php中文网，转载请注明出处，感谢您的尊重！