1 dialog一些参数 可以进行文件上传等操作
closed:true;定义初始状态为关闭;
modal:true;对话框被打开时,会有一个modal-mask,使得对话框底部的内容被一个层覆盖,
不能进行其他操作(多个对话框时可能存在模态框覆盖不全,部分内容仍然可以操作的)
html文件 <div id="dlgImport" class="easyui-dialog" closed="true" title="Import Excel"> <form action="" method="post" enctype="multipart/form-data"> Excel File:<input class="easyui-filebox" name="file" style="300px"><br/> <input type="submit" value="Sumbit"> <span id="import-tip" style="display: none">importing...</span> </form> </div> js文件 $('#btnImport').click(function(){ $('#dlgImport').dialog('open') }); $('#dlgImport form').ajaxForm({ dataType:'json', beforeSubmit:function(){ $.messager.alert('Notice','processing...'); }, success:function(data){ $.messager.alert('Notice','Import excel file success'); $('#dlgImport').dialog('close'); setTimeout(function(){ $(".messager-body:first").window('close'); },100); queryTable(Params()); }, error:function(data){ setTimeout(function(){ $(".messager-body:first").window('close'); },100); $.messager.alert('Notice','Import excel file failed!'); queryTable(Params()); } });
2 dategrid 数据表格初始化
html <div class="easyui-layout" > <table id="tt" rownumbers="true" pagination="true"></table> </div> js function queryTable(params) { $('#tt').datagrid({ $(".queryTable").width()+60, height:($(window).height()-200), //将window--》document页面大小变动时将会被刷新,这样设定宽高流出页面分页 singleSelect:true, queryParams: params||{}, loadMsg: "Loading, please wait ...", pageList: [15,25,35,45,65,100], idField:'id',
rownumbers:false, //行号隐藏 nowrap:false, //每个单元格进行换行
url:" ", fitColumns:true, //列宽自适应,需要有至少一列设定固定宽度方可生效 columns:[[ {field: 'code',title:'Code',8%}, {field: 'classify',title:'Classify'}, {field: 'status',title:'Status',align:'center',formatter:function(val,obj,idx){ var rtn=''; if(val!=0&&val==''){ rtn=''; }else{ switch(val){ case 0: rtn='unaccept'; break; case 1: rtn='process'; break; case 2: rtn='refuse'; break; case 3: rtn='complete'; break; case 5: rtn='cancel'; break; case 4: rtn='expire'; break; } } return rtn; }}, {field: 'dd',title:'Dd'},
{field: 'operator',title:'Operator',,formatter:function(value,obj,index){
var html="<a href='#' onclick='updateA("+obj+",update)'>Update</a>"; html+=" | <a href='#' onclick='updateFBStatus("+obj+",view)'>View</a>";return html;}
}
]]
});
$('#tt').datagrid("clearSelections"); }
表格行的上下移动:https://blog.csdn.net/u014488113/article/details/53435740
3 修改和更新等可以利用easyui-window实现 http://www.jeasyui.net/plugins/180.html
4 文件导出
//当导出的文件都是由后台写好,则根据接口可以直接进行导出
$('#btnExport').click(function(){ var params = Params(); window.location='urll?'+ jQuery.param(params); });
5 获取datagrid所有行数据
var rows = $("#tt").datagrid("getRows"); for(var i=0;i<rows.length;i++){ seriesArr.push(rows[i].id); }