正文

jqgrid上移下移单元格(代码片段)

zhengwei-cq  zhengwei-cq  2023-01-04  435

关键词：

在表格中常常需要调整表格中数据的显示顺序，我用的是jqgrid,实现原理就是将表中的行数保存到数据库中，取数据时按行进行排序

1、上移，下移按钮

 <a href="javascript:void(0)" onclick="operateWithOneRowById(up)" class="linkButton">上移</a>
 <a href="javascript:void(0)" onclick="operateWithOneRowById(down)" class="linkButton">下移</a>

2、上移下移功能

function operateWithOneRowById(callback) 
            var selected = tableObj.jqGrid(‘getGridParam‘, ‘selrow‘);
            if (selected == null) 
                alert("请用鼠标点击选择一行后再执行操作!");
                return;
            
            return callback(selected);

3、这里的callback是up和down 函数的合并，那么我们再看看这两个函数

function up(selected) 
            if (selected == 1) return;
            else 
                gridHelper.moveRow("up", tableObj);
            
        

        function down(selected) 
            gridHelper.moveRow("down", tableObj);

4、在这个函数中，我们都调用了一个函数movRow() 让我们来看看这个函数，这个函数的原理就是把当前选中的行和我要移到至的行进行交换就行了。

   //移动一行
    this.moveRow = function(moveMethod, grid) 
        if (grid) tableObj = grid;
        var id;
        //    if(selRow)    id=selRow;
        //    else id = getSelRow();
        id = this.getSelRow();
        tableObj.restoreRow(id);
        if (id == null) return;
        var targetId = this.getTargetId(id, moveMethod)
        if (targetId == -1) return;

        var temp1 = tableObj.getRowData(id);
        var temp2 = tableObj.getRowData(targetId);
        //对调行号
        var tempRn = temp1.rn;
        temp1.rn = temp2.rn;
        temp2.rn = tempRn;
        //对调数据
        tableObj.setRowData(id, temp2);
        tableObj.setRowData(targetId, temp1);
        tableObj.setSelection(targetId);

5、在4中调用了getTargetId（）方法，我们再来看看这个方法

 //取得上移时的上一行的id，或下移时的下一行的id
    this.getTargetId = function(selId, method, grid) 
        if (grid) tableObj = grid;
        var ids = tableObj.getDataIDs();
        for (var i = 0; i < ids.length; i++) 
            if (selId == ids[i] && method == "up") 
                if (i == 0) return -1;
                else return ids[i - 1];
            
            if (selId == ids[i] && method == "down") 
                if (i == ids.length - 1) return -1;
                else return ids[i + 1];

6、增加数据库字段Sequence 我用的nhibernate 还要在配置文件中进行修改，增加一行<property name="Order" column="Sequence"></property> 实体类中增加字段 order，在保存表时保存表中的行号
保存数据说明：保存时是保存表中的所有数据，有已经在数据库中的数据，有没有存在数据库中的数据，根据IDj是否为0来判断的。

 public void UpdatePlan(PlanToReport plan, List<PlanPerson> list)
        
            NHibernate.ISession session = NHibernateSessionManager.Instance.GetSession();
            try
            
                PlanToReportService.UpdatePlan(plan);
                for (int i = 0; i < list.Count; i++)
                
                    PlanPerson item = list[i];
                    if (item.ID != 0)
                    
                        PlanPerson itemnew = PlanToReportService.GetPlanPersonById(item.ID);
                        itemnew.JobName = item.JobName;
                        itemnew.ApprovalResults = item.ApprovalResults;
                        itemnew.Attachments = item.Attachments;
                        itemnew.CountryCode = item.CountryCode;
                        itemnew.CountryName = item.CountryName;
                        itemnew.MissionType = item.MissionType;
                        itemnew.Position = item.Position;
                        itemnew.Remark = item.Remark;
                        itemnew.StartDate = item.StartDate;
                        itemnew.Status = item.Status;
                        itemnew.Explain = item.Explain;
                        itemnew.Order = i;
                        PlanToReportService.AddNewPlanPerson(itemnew);
                    
                    else
                    
                        item.PlanID = plan.ID;
                        item.Order = i;
                        PlanToReportService.AddNewPlanPerson(item);
                    
                        
                
                session.Transaction.Commit();
            
            catch (Exception ep)
            
                session.Transaction.Rollback();
                throw ep;

7、取数据时根据 Order 字段进行排序

public List<PlanPersonShowInGrid> GetShowPersonInPlan(int planID)
        
            ISession session = NHibernateSessionManager.Instance.GetSession();
            ICriteria criteria = session.CreateCriteria(typeof(PlanPersonShowInGrid));
            criteria.Add(Expression.Eq("PlanID", planID)).AddOrder(Order.Asc("Order"));
            List<PlanPersonShowInGrid> list = new List<PlanPersonShowInGrid>();
            try
            
                IList l = criteria.List();
                list = PlanToReportDao.IListToList<PlanPersonShowInGrid>(l);
            
            catch  
            return list;

至此，表格中数据的上移下移就完成了。

上移下移扩展版总结(代码片段)

需求上移下移需求： 1）点击上移就将当前的按钮的父级上移一位 2）当点击第一个时候将当前按钮的父级移动到最后一位 3）当点击最后一个时候将当前按钮的父级移动到首位4）带过渡动画需求分析：下移：剪切所点... 查看详情

vue做一个上移和下移，删除的li功能(代码片段)

效果图：思路就是冒泡原理，把数据放到一个空数组，对其进行排序,单选框用到的是iview。具体实现代码：<divv-for="iteminsingledLists":key="item.index">//数组singledLists<Checkbox@on-change="checkSingle":disabled="isDisabled"v-model="item.isRight 查看详情

jqgrid中动态生成colmodel实现双击编辑整列时，鼠标定位在当前双击指定单元格(代码片段)

通过配置ondbclick事件来实现双击功能ondblClickRow:function(rowid,iRow,iCol,e)//获取表格的初始modelvarcolModel=$(TableId).jqGrid().getGridParam("colModel");//正在编辑的id，设置该项是为了不完成当前的编辑，不可以编辑下一行；if(current_editing_id!="0")re 查看详情

jq完成表格单元格顺序的上移下调

如有指教及疑问,欢迎留言 HTML代码1<tableclass="exampletable">2<thead>3<tr>4<th>单元格</th>5<th>操作</th>6</tr>7</thead>8<tbody>9<tr>10<td>< 查看详情

元素的上移下移等排序操作

...项目中，我经常遇到对元素进行排序操作的需求，包括：上移、下移、置顶、置底。那么这些操作如何实现呢？上移，简言之就是将需要上移的元素和它前面元素交换位置，使用insertBefore(),大致思路为：vardom=需要上移的元... 查看详情

wpflistbox选中项上移下移

原文:wpflistbox选中项上移下移 privatevoidMoveUp_Click(objectsender,RoutedEventArgse)????????????DataRowViewrowView=this.listScrip.SelectedItemasDataRowView;???????if(rowView==null)?????????????? 查看详情

phpmysql排序上移下移

后台点击上移新闻向上移动一行并且前台的显示顺序也改变哪里有教程啊提示：web后台的话用的是js。mysql排序的话一般按id，，，默认是后入先出，，，新闻排序，你可以见一个排序字段，比如MyOrder，数字类型，，然后MyOrder默... 查看详情

iOS - 键盘显示时顶部单元格从屏幕上移开

】iOS-键盘显示时顶部单元格从屏幕上移开【英文标题】：iOS-topcellsmovedupawayfromthescreenwhenkeyboardshows【发布时间】：2019-04-2502:52:49【问题描述】：这是键盘显示之前：这是键盘显示后：这就是我想要的：如果有足够的消息，则将所... 查看详情

angularjs实现数据列表的增加删除和上移下移等功能实例

...章给大家分享了AngularJS循环实现数据列表的增加、删除和上移下移等基础功能，对大家学习AngularJS具有一定的参考借鉴价值，有需要的朋友可以看看。效果图实例代码<!DOCTYPEhtml><htmllang="en"ng-app="myapp"ng-c 查看详情

如何关闭单元格编辑器？

...l-editor?【发布时间】：2012-03-1912:21:46【问题描述】：使用jqGrid我想在双击上打开一个单元格编辑器，所以我的代码包括这部分：ondblClickRow:function(rowid,iRow,iCol,e)jQuery(\'#jqGrid\').setGridParam(cellEdit:true);jQuery(\'#jqGrid\').e 查看详情

lind.ddd.domain.isortbehavor～上移与下移

在进行列表排序时，有个“上移”和“下移”操作，这个一般在内存里完成，然后统一提交到数据库中，对于上移与下移的设计，大叔在LIND.DDD.DOMAIN里有一个ISortBehavor接口，主要是说，如果实体对象支持排序功能，... 查看详情

jqGrid 单元格编辑 - 双击编辑？

】jqGrid单元格编辑-双击编辑？【英文标题】：jqGridCellEditing-DoubleClicktoEdit?【发布时间】：2011-03-1801:07:37【问题描述】：默认情况下，如果jqGrid单元格是可编辑的，单击该单元格会将其更改为编辑模式。有什么办法可以让它通过... 查看详情

请教jquery对表格的行操作的。对页面表格进行上下移动位置，删除记录的操作。谢谢。如下补充

型号厂商数量封装批号供应商单价操作asdf原装asdf0123上移下移删除model004原装asdasda011上移下移删除model001信息技术原装dasdas025上移下移删除model002信息技术原装dasdas026上移下移删除model003信息技术原装dasdas011上移下移删除asdasd原装... 查看详情

思想上移，行动下移

...导致对于问卷的相关内容，不敢苟同，做以深思。借思想上移。行动下移，八字总结，以表不忘初心之念。首先。我想说的是：也许。我没有不论什么资格写这篇总结，由于我也是来工作的。更何况，还仅仅是个初入社会的... 查看详情

table中实现数据上移下移效果

html由于vue+Element项目中的table，没有开放的上移下移的api,但是能对数据操作，故思路为数组中的一条数据，再重新添加一条数据，办法有点笨，但是好歹也是实现了，望有好的办法的，请留言<el-table:data="tableData"style="width:100%"&... 查看详情

js实现数组内数据的上移和下移

varswapItems=function(arr,index1,index2){　　arr[index1]=arr.splice(index2,1,arr[index1])[0]　　returnarr}vararr=[1,2,3]varnewArr=[]upData(arr,index){　　if(this.arr.length>1&&index!==0){　　　　newA 查看详情

poi插入单个单元格

POI怎么没找到插入单个单元格，然后周围单元格右移或者下移的方法？参考技术AHSSFWorkbookworkbook=newHSSFWorkbook();HSSFSheet=workbook.createSheet();HSSFRowrow=sheet.getRow(1);HSSFCellcell=row.getCell(1);cell.setCellValue('11')在第一个单元跟内插入11值... 查看详情

使用jquery实现option的上移和下移

基本思路：上移：（1）获取当前选中的元素的索引值（2）判断当前元素是否为第一个元素（3）如果是，则不执行上移操作，如果不是，则则调用insertBefore方法插入... 查看详情