实例分享jQuery EasyUI开发技巧总结

jQuery EasyUI 是一组基于 jQuery 的 UI 插件集合体，而 jQuery EasyUI 的目标就是帮助 web 开发者更轻松的打造出功能丰富并且美观的 UI 界面。开发者不需要编写复杂的 javascript，也不需要对 css 样式有深入的了解，开发者需要了解的只有一些简单的 html 标签。

jQuery EasyUI 开发技巧总结

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

addTab({
 title:node.text,
 closeable:true,
 content:‘<iframe src="'+url+'" frameborder="0" style="border:0;width:100%;height:99%"></iframe>
 });

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

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

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<rows.length;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");
 $('<p/>').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
 
});

沈唁志|一个PHPer的成长之路！ 原创文章采用CC BY-NC-SA 4.0协议进行许可，转载请注明：转载自：实例分享jQuery EasyUI开发技巧总结