• easyui dialog 和 dategrid相关设置与应用


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

      

  • 相关阅读:
    Elasticsearch 搭建
    P137、面试题23:从上往下打印二叉树
    数组高级应用—排序与查找
    Java API ——StringBuffer类
    Java API ——String类
    P134、面试题22:栈的压入、弹出序列
    P132、面试题21:包含min函数的栈
    P127、面试题20:顺时针打印矩阵
    P125、面试题19:二叉树的镜像
    Java API ——Scanner类
  • 原文地址:https://www.cnblogs.com/xhliang/p/7728051.html
Copyright © 2020-2023  润新知