easyui datagrid 列拖動“含原始碼”

阿新 • • 發佈：2018-11-26

easyui datagrid 列拖動“含原始碼”

苟且，詩與遠方
1.功能需求
2.直接看效果圖
3.需要的包
4.tuodong3.js程式碼片
5.頁面程式碼片(警告：JS最後一行需要修改)

苟且，詩與遠方

本文章為秋後的蟲子君原創文章，含原始碼，轉載需註明出處，否則一經發現直接舉報。

1.功能需求

甲方客戶要求easyui datagrid的資料可以左右拖動排列順序，實現列拖動。
大哥啊，這是網頁，不是客戶端啊！！！
沒辦法，甲方才是爸爸！
可是easyui datagrid官方文件裡面又沒有列拖動屬性，那就只能自己重寫一個了。

2.直接看效果圖

拖拽前:
Alt
拖拽時:
Alt
拖拽後:
Alt

3.需要的包

檔案	Value
jquery	建議1.8以上
jquery.easyui.min.js	建議easyui1.5以上
easyui.css	建議easyui1.5以上
tuodong3.js	下面貼出原始碼

4.tuodong3.js程式碼片

  $.extend($. 
fn.dialog.methods, {  
    mymove: function(jq, newposition){  
        return jq.each(function(){  
            $(this).dialog('move', newposition);  
        });  
    }  
}); 
	// $('#dg').dialog('mymove', {  
		//    left: 200,  
		//    top: 100  
		//});  


	 $.extend($.fn.datagrid.methods,{
		 columnMoving: 
 function(jq){
		 return jq.each(function(){
		 var target = this;
		 var cells = $(this).datagrid('getPanel').find('div.datagrid-header td[field]');
		 cells.draggable({
		 revert:true,
		 cursor:'pointer',
		 edge:5,
		 proxy:function(source){
		 var p = $('<div class="tree-node-proxy tree-dnd-no" style="position:absolute;border:1px solid #ff0000"/>').appendTo('body');
		 p.html($(source).text());
		 p.hide();
		 return p;
		 },
		 onBeforeDrag:function(e){
		 e.data.startLeft = $(this).offset().left;
		 e.data.startTop = $(this).offset().top;
		 },
		 onStartDrag: function(){
		 $(this).draggable('proxy').css({
		 left:-10000,
		 top:-10000
		 });
		 },
		 onDrag:function(e){
		 $(this).draggable('proxy').show().css({
		 left:e.pageX+15,
		 top:e.pageY+15
		 });
		 return false;
		 }
		 }).droppable({
		 accept:'td[field]',
		 onDragOver:function(e,source){
		 $(source).draggable('proxy').removeClass('tree-dnd-no').addClass('tree-dnd-yes');
		 $(this).css('border-left','1px solid #ff0000');
		 },
		 onDragLeave:function(e,source){
		 $(source).draggable('proxy').removeClass('tree-dnd-yes').addClass('tree-dnd-no');
		 $(this).css('border-left',0);
		 },
		 onDrop:function(e,source){
		 $(this).css('border-left',0);
		 var fromField = $(source).attr('field');
		 var toField = $(this).attr('field');
		 setTimeout(function(){
		 moveField(fromField,toField);
		 $(target).datagrid();
		 $(target).datagrid('columnMoving');
		 },0);
		 }
		 });
		  
		 // move field to another location
		 function moveField(from,to){
			  
		var columns = $(target).datagrid('options').columns;
		 var cc = columns[0];
		 
		 var c = _remove(from);
		 if (c){
		 _insert(to,c);
		 }

		 function _remove(field){
		 for(var i=0; i<cc.length; i++){
		 if (cc[i].field == field){
		 var c = cc[i];
		 cc.splice(i,1);
		 return c;
		 }
		 }
		 return null;
		 }
		 function _insert(field,c){
			 
		 var newcc = [];
		 for(var i=0; i<cc.length; i++){
		 if (cc[i].field == field){
		 newcc.push(c);
		 }
		 newcc.push(cc[i]);
		 }
		 columns[0] = newcc;
		 }
		 
	
	
	//columns[0]是拖動後儲存的順序
	//這個是拖動觸發事件
	tuodong_ajax(columns[0]);
 
		 }
		 });
		 }
		 });
	 
  function 	 tuodong_ajax(jilu_string){
 	//遍歷一下順序，裡面的ck引數是複選框的field，一定要小心
	  var paixu="";
	 $.each( jilu_string, function( key, value ){
		 	if(value.field != 'ck'){
		 		 paixu+=value.field;
				 if(key < jilu_string.length){
					 paixu+=",";
				 }
		 	}

			});
	 //利用ajax將順序儲存返回給後臺
	 $.ajax({
		 type: 'POST',
		 url : "/TreeController/tuodong.do",
		data : { paixu : paixu  },
		dataType : "json",
		success : function(result){
	
		}
	}); 
  }

5.頁面程式碼片(警告：JS最後一行需要修改)

<html>
<head>
  <script type="text/javascript" src="/static/js/jquery_1.8.0.min.js"></script>
  <script type="text/javascript" src="/static/js/jqueryeasyui/jquery.easyui.min.js"></script>
  <link rel="stylesheet" type="text/css" href="/static/js/jqueryeasyui/themes/bootstrap/easyui.css">
   <script type="text/javascript" src="/view/pages2/tuodong3.js"></script>

  <script type="text/javascript">
  
 $(function() {
  	 $("#dg").datagrid({
    			pagination:true,//分頁工具欄
    			url :"/Souli_51_Controller/select.do",
    			idField:"name",//標識欄位
    			fit: true, //自適應大小
    			nowrap: true,//資料長度超出列寬時將會自動擷取。
                rownumbers:true,//行號
               // fitColumns:true,//自動使列適應表格寬度以防止出現水平滾動。
                sortOrder: 'asc',//設定排序規則
                sortName: 'name',//設定預設排序的列
                remoteSort:true,//設定屬性（對本地資料是false，預設為true）
            	pageSize : 20,
            	pageList : [15,20,30,50,100,150,200,250,300],
            	columns : [ [ 
            	           {field : 'ck',checkbox : true}, 
            	           {field : 'name',	title:'姓名',		align:'center',sortable: true,width:50},  
            	           {field : 'account_id',title:'呼叫',align:'center',sortable: true,width:50}, 
            	           {field : 'uuid',	title:'工號',		align:'center',sortable: true,width:50}, 
    				] ],
    		
    			//表頭雙擊事件
    			onDblClickRow: function (index, row) {
    				},
    		}).datagrid("columnMoving");	//這行是開啟新增拖動
    	}); 
    
    </script>

</head>
<body>
<div id="a" class="easyui-layout"  style="width:100%;height:100%;">
    <div data-options="region:'center'">
   		<table id="dg"></table>
	</div>
	<div id="ft" style="height:60px"></div>
</div>
<div id="bfdc_jiazai_div"></div>

</body>
</html>

easyui datagrid 列拖動“含原始碼”

easyui datagrid 列拖動“含原始碼” 苟且，詩與遠方 1.功能需求 2.直接看效果圖 3.需要的包 4.tuodong3.js程式碼片 5.頁面程式碼片(警告：JS最後一行需要修改)

EasyUI datagrid 列寬度拖動問題

datagrid grid ima 獲取 tag log mage 使用寬度問題:拖不動或者偶爾能拖動,拖動不按指定？原因:列寬度綁定的時候使用的百分比; 方法:獲取總寬度,經過百分比計算在綁定 EasyUI datagrid 列寬度拖動問題

easyUI列拖動

DataGrid實現拖動任意列的列頭改變列寬度時,讓其他列的寬度和他一樣寬

首先建立列頭的ColumnHeaderStyle: <DataGrid.ColumnHeaderStyle> <Style TargetType="{x:Type DataGridColumnHeader}">

動態修改easyui-datagrid 列

csharp eas blog 動態修改 field grid datagrid htm 查詢 <table id="DataList" title="查詢結果" style="width:99%;padding:10px;"></table>

easyUI之可拖動控制元件——easyui-draggable

以上為元件的屬性，一下對屬性做實踐操作解釋： draggable提供可拖動控制元件實現方式（js）：頁面定義： <div id="box" class="easyui-draggable" style="width:400px;height:200px;backgro

bootstrap table 列拖動

$("#exampleTable").colResizable({ liveDrag: true,//實時顯示滑動位置 gripInnerHtml: "<div class='grip'></div>", //draggingClass: "dragg

EasyUI介紹和拖動例子（draggable）

1.JqueryEasyUI是什麼？基於Jquery基礎之上的一堆外掛. 非常容易實現頁面的常見效果 tree draggable datagrid tab 2.JqueryEasyUI目錄結構介紹 demo:案例 locale:國際化 plugins:各種外掛的

easyui datagrid列中使用tooltip

要實現這樣一個效果：資料載入到DATAGRID中，滑鼠移至某一列時，會彈出tooltip提示框。最初的實現方法： { field: 'Reply', title: '備註', width: 220, align: "center", for

easyui-dialog禁止拖動的辦法

因為dialog繼承了window事件,window事件繼承了panel事件。用panel事件，onMove即可完成靜止拖動dialog，並且移動滑鼠icon也會消失。(這方法在ie9、火狐、谷歌正常執行，但在ie6會異常關閉的），這時應該改為：onMove:functio

easyui datagrid列使用按鈕

前的方法，只能顯示成問題，不能顯示按鈕。 $('#datagrid').datagrid({ border:false, fitColumns:true, singleSelect: true, url:url, columns

EasyUI Datagrid 列屬性函式中如何獲取當前列頭名字列的field

$('#dg').datagrid({ columns: [[{ field: 'userId', title: 'User', width: 80, formatter: function(value,

EasyUI-datagrid列顯示Icon

<table id="dg_function" class="easyui-datagrid" data-options=" fit:true, rownumbers:true,

動態改變easyui datagrid 列的title

1.通過截圖知道，要修改的title是span標籤中的文字，所以我要想辦法拿到span標籤物件。 2.span標籤不能直接取到，應為沒有任何屬性可以唯一標識這個標籤。檢視這個標籤的父節點，父節點di

easyui datagrid 列隱藏和顯示

一、設定列為隱藏列寫法1（html屬性方法）： <table id="ClassInfo_DataGrid" class="easyui-datagrid" style="width: 1

easyui datagrid 列分組和行歸組

資料格式： { "col": [ "分類", "id", "模式英文名", "模式中文名", "教務系統", "Oracletest",

EasyUI datagrid 列包含超連結以及滑鼠經過提示單元格內容

/**資料繫結載入**/ function Lodedata() { $('#datagrid').datagrid( { url: 'Code/Default.ashx?me

easyUI datagrid列的取值問題

問題描述: 我們需要得到創業方案策略NEW的百分數，但是這個表格是動態顯示的，即可能存在多個策略，如下圖顯然，它們的field是變化的，那麼該如何取到它們的值呢？解決方案： ①首先獲取所在列的名稱 var colName = $("#dg").datagrid('ge

easyUI的datagrid列屬性添加超鏈接

ash ati eas height index columns 內容 nowrap 行號 $("#dg").datagrid({ url: "../Ajax/PurchaseAjax.ashx", queryParams://每次請求的參數

easyUI datagrid 多行多列數據渲染異常緩慢原因以及解決方法

後端 http 前後端公司發送請求 class 之前 vue 做的原因最近，在優化之前公司幫聯想（外包）做的一個老的後臺管理系統，由於項目是基於easy UI框架，頁面是後臺用jsp實現的，再加上在公司推行前後端分離的實踐，大部分項目都基於vue采用前後端分離去實現

easyui datagrid 列拖動“含原始碼”