jQuery EasyUI开发技巧总结

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");
 $('<div/>').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

});

 希望通过本文能帮助到大家，大家如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！