页面上移、下移、保存、编辑备份

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<t:base type="jquery,easyui,tools,DatePicker"></t:base>  
  <t:datagrid name="sonList1" checkbox="true" fitColumns="false"   title="excel模板" sortName="sortNumber" sortOrder="asc" pagination="true" pageSize="200" onDblClick="editRow('','','sonList1')" 
               actionUrl="fileCustemplateController.do?datagrid1&templatefid=${templatefid }" idField="id" fit="true" queryMode="group" extendParams="view:scrollview">
    <t:dgCol title="id"  field="id" hidden="true"  queryMode="group"  width="120"></t:dgCol>
    <t:dgCol title="代号"  field="sortNumber"  queryMode="group"  width="120" ></t:dgCol>
    <t:dgCol title="列名"  field="templateTargetname" query="true" queryMode="single"  width="120" extendParams="editor:'text'"></t:dgCol>
    <t:dgCol title="映射列名称"  field="templateOrgincolumn"  queryMode="single"  width="120" extendParams="editor:'text'"></t:dgCol>
    <t:dgCol title="映射列代号"  field="templateOrginid"  queryMode="single"  width="120" extendParams="editor:'numberbox'"></t:dgCol>
    <t:dgCol title="映射列key"  field="templateOrginkey"  queryMode="single"  width="120" extendParams="editor:'text'"></t:dgCol>
  
    <t:dgToolBar  title="录入" icon="icon-add"  funname="addRow"></t:dgToolBar>
    <t:dgToolBar  title="编辑" icon="icon-edit"  funname="editRow"></t:dgToolBar>
    <t:dgToolBar  title="保存" icon="icon-save" url="fileCustemplateController.do?saveRows1" funname="saveData"></t:dgToolBar>
    <t:dgToolBar  title="取消编辑" icon="icon-undo" funname="reject"></t:dgToolBar>
    <t:dgToolBar title="批量删除"  icon="icon-remove" url="fileCustemplateController.do?doExcelcolumnDel" funname="deleteALLSelect"></t:dgToolBar>
    <t:dgToolBar  title="上移" icon="icon-undo" funname="goUp"></t:dgToolBar>
    <t:dgToolBar  title="下移" icon="icon-undo" funname="goDown"></t:dgToolBar> 
    
  </t:datagrid>
     
 <script type="text/javascript"> 
    //上移
    function goUp(title,addurl,gname){
         var row = $('#'+gname).datagrid('getSelected');
         var index = $('#'+gname).datagrid('getRowIndex', row);
         mysort(index, 'up', gname);
     }
    //下移
    function goDown(title,addurl,gname){
         var row = $('#'+gname).datagrid('getSelected');
         var index = $('#'+gname).datagrid('getRowIndex', row);
         mysort(index, 'down', gname);
     }
    //移动动作
    function mysort(index, type, gridname) {
        if ("up" == type) {
            if (index != 0) { 
                var toup = $('#' + gridname).datagrid('getData').rows[index];
                var todown = $('#' + gridname).datagrid('getData').rows[index - 1];
                var oldsortNumber = toup.sortNumber; 
                var newsortNumber = todown.sortNumber; 
                todown.sortNumber=oldsortNumber;
                $('#' + gridname).datagrid('getData').rows[index] = todown;
                toup.sortNumber=newsortNumber;
                $('#' + gridname).datagrid('getData').rows[index - 1] = toup;
                $('#' + gridname).datagrid('refreshRow', index);
                $('#' + gridname).datagrid('refreshRow', index - 1);
                $('#' + gridname).datagrid('selectRow', index - 1); 

                $('#' + gridname).datagrid('unselectRow', index);//不选中
            }else{
                $.messager.alert('提示','已为第一行!')
            }
        } else if ("down" == type) {
            var rows = $('#' + gridname).datagrid('getRows').length;
            if (index != rows - 1) {
                var todown = $('#' + gridname).datagrid('getData').rows[index];
                var toup = $('#' + gridname).datagrid('getData').rows[index + 1];
                var oldsortNumber = toup.sortNumber; 
                var newsortNumber = todown.sortNumber; 
                todown.sortNumber=oldsortNumber;
                $('#' + gridname).datagrid('getData').rows[index + 1] = todown;
                toup.sortNumber=newsortNumber;
                $('#' + gridname).datagrid('getData').rows[index] = toup;
                $('#' + gridname).datagrid('refreshRow', index);
                $('#' + gridname).datagrid('refreshRow', index + 1);
                $('#' + gridname).datagrid('selectRow', index + 1);
                $('#' + gridname).datagrid('unselectRow', index);//不选中
            }else{
                $.messager.alert('提示','已为最后一行!')
            }
        }
 }     
 
    //添加行
    function addRow(title,addurl,gname){
        var maxIndex = $('#'+gname).datagrid('getRows').length+1;
        $('#'+gname).datagrid('appendRow',{"sortNumber":maxIndex});
        var editIndex = $('#'+gname).datagrid('getRows').length-1; 
        $('#'+gname).datagrid('selectRow', editIndex).datagrid('beginEdit', editIndex);
    }
    //保存数据
    function saveData(title,addurl,gname){     
        if(!endEdit(gname))
            return false;
        var rows=$('#'+gname).datagrid("getRows");
 
        var result={};
        for(var i=0;i<rows.length;i++){
            for(var d in rows[i]){
                result["fcecentity["+i+"]."+d]=rows[i][d];
            }
        }
        console.log(result)
        addurl+='&templatefid=${templatefid}';
        $.ajax({
            url:"<%=basePath%>/"+addurl,
            type:"post",
            data:result,
            dataType:"json",
            success:function(data){
                tip(data.msg);
                if(data.success){
                    reloadTable();
                }
            }
        })
    }
    
    //结束编辑
    function endEdit(gname){
        var  editIndex = $('#'+gname).datagrid('getRows').length-1;
        for(var i=0;i<=editIndex;i++){
            if($('#'+gname).datagrid('validateRow', i)){
                $('#'+gname).datagrid('endEdit', i);
            }else{
                tip("请选择必填项(带有红色三角形状的字段)!");
                return false;
            }
        }
        return true;
    }
    
    //编辑行
    function editRow(title,addurl,gname){
        var rows=$('#'+gname).datagrid("getChecked");
        if(rows.length==0){
            tip("请选择条目");
            return false;
        }
        for(var i=0;i<rows.length;i++){
            var index= $('#'+gname).datagrid('getRowIndex', rows[i]);
            $('#'+gname).datagrid('beginEdit', index);
            //
            var ed = $('#'+gname).datagrid('getEditor', {index:index,field:"templateOrginid"});
            var templateOrgincolumn = $('#'+gname).datagrid('getEditor', {index:index,field:"templateOrgincolumn"});
            var templateOrginkey = $('#'+gname).datagrid('getEditor', {index:index,field:"templateOrginkey"});
            $(ed.target).change(function(){  
                  var res = $(this).val();
                  $.ajax({
                        url : "fileCustemplateController.do?getRes&res="+res,
                        type:'GET',
                        dataType:'JSON',
                        delay: 250,
                        cache: true,
                        success: function(data){
                            var col_name = data[0].col_name;
                            var col_code = data[0].col_code;   
                             $(templateOrgincolumn.target).val(col_name)
                             $(templateOrginkey.target).val(col_code)
                           
                        }
                    });
            });
        }
    }
    
    
    //取消编辑
    function reject(title,addurl,gname){
        $('#'+gname).datagrid('clearChecked');
        $('#'+gname).datagrid('rejectChanges');

    }
 
 $(document).ready(function(){
    
     
 });
 
 </script>
原文地址:https://www.cnblogs.com/xueblvip/p/14818856.html