easyui datagrid 列拖拽

时间:13-08-01 栏目:EasyUI 作者:zongyan86 评论:1 点击: 8,411 次

还是那句话:“客户是上帝,他们怎么说我们这些程序猿只能尽自己所能来达到效果。”我觉着吧,他们太厉害了 看似没什么必要的功能,硬是能想出来逼着我这个前端还比较薄弱的人来实现。这次提出的要求 如题:datagrid列要能够拖拽。由于之前项目是使用easyui做的,可是datagrid它并没有提供列拖拽的功能。然后又去网上搜索了下,丫丫的竟然也没多少这方面实现的例子。我拍了拍头郁闷呐,又得自己做。好吧 自己做就自己做吧。说下思路:首先easyui 它有提供了拖拽的功能Draggable,那我们就可以想 拖拽标题头到另外的标题头上面我们就对datagrid的columns重新绑定一次 并刷新datagrid这个功能不就行了?没错思路可行,let's do it!by 梨洛 。实现上代码来解释 

复制代码
<script type="text/javascript"> var cols = [{ field: 'testName', title: '<span class="dropitem">测试名</span>', align: 'center',width:120 },
               { field: 'testValue', title: '<span class="dropitem">测试值</span>', align: 'center', width: 120}]; var url="/Test/Test1Data";
    $(document).ready(function () {
        init();
        drag();//绑定datagrid,绑定拖拽
    }); function init() {
        $("#test").datagrid({
            url: url,
            type: "post",
            datatype: "json",
            width: 600,
            height: 280,
            loadMsg: "数据加载中,请稍后...",
            nowrap: true,
            rownumbers: false,
            pagination: true,
            singleSelect: true,
            columns: [cols], //bind数据成功重新设置拖动对象  onLoadSuccess: function (data) {          
                drag();
            }
        });
    } //拖动drag和drop都是datagrid的头的datagrid-cell  function drag() {
        $('.datagrid-header-inner .datagrid-cell').draggable({
            revert: true,
            proxy: 'clone' }).droppable({
            accept: '.datagrid-header-inner .datagrid-cell',
            onDrop: function (e, source) { //取得拖动源的html值  var src = $(e.currentTarget.innerHTML).html(); //取得拖动目标的html值  var sou = $(source.innerHTML).html(); var tempcolsrc;//拖动后源和目标列交换  var tempcolsou; var tempcols=[]; for (var i = 0; i < cols.length; i++) { if (cols[i].title == sou) {
                        tempcolsrc = cols[i];//循环读一遍列把源和目标列都记下来  } else if (cols[i].title == src) {
                        tempcolsou = cols[i];
                    }
                } for (var i = 0; i < cols.length; i++) { //再循环一遍,把源和目标的列对换  var col = {
                        field: cols[i].field,
                        title: cols[i].title,
                        align: cols[i].align,
                        width: cols[i].width
                    }; if (cols[i].title == sou) {
                        col = tempcolsou;
                    } else if (cols[i].title == src) {
                        col = tempcolsrc;
                    }
                     tempcols.push(col);  
                }
                 cols = tempcols; //1秒后执行重绑定datagrid操作。可能是revert需要时间,这边如果没有做延时就直接重绑 就会出错。  //我目前的水平就想到这个笨办法,各位如果有好的想法建议可以提出来讨论下。  timeid = setTimeout("init()", 1000);
            }
        });
    } </script> <div id="test"></div>
复制代码

上效果图:

                   

       原datagrid   

    

         拖动列     

  

                       拖动后两列交换

再附上这几篇文章的源码

相关jquery取元素什么的 请参看前两篇 jquery模拟enter按下

转载请注明出处http://www.cnblogs.com/wujie6166

web开发分享



声明: 本文由( zongyan86 )原创编译,转载请保留链接: easyui datagrid 列拖拽

easyui datagrid 列拖拽:目前有1 条留言

  1. 沙发
    花茶冰糖:

    很好很强大!
    学习了!

    2013-09-28 上午 11:14 [回复]

发表评论



热搜关键词: easyui   开发   web开发
广告虚位以待

读者排行

关注我们