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="width: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({
	    width: $(".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',width: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='#' οnclick='updateA("+obj+",update)'>Update</a>";
　　　　　　　　　　　　　　　　　　　html+="  |  <a href='#' οnclick='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);
        }  

　　

转载于:https://www.cnblogs.com/xhliang/p/7728051.html