`

JQGrid 列编辑,JQGrid 添加行,JQGrid 删除行

阅读更多

<script>

$(document).ready(function()
{
	initPlsfList();
});
//初始化grid列表
function initPlsfList(){
	//缓存表列数组,key 为页面元素的name ,value 对应数据库中的字段
	var cellArray = new Array();
	cellArray["zoneID"] ="ZONE_ID"; 
	cellArray["factorPG"] ="FACTOR_PG"; 
	cellArray["factorQG"] ="FACTOR_QG";
	cellArray["factorPL"] ="FACTOR_PL";
	cellArray["factorQL"] ="FACTOR_QL";
	cellArray["valid"] ="VALID";
	

	var caseID = '${caseID}';
	$("#plsfList").jqGrid({
        url:"<c:url value='/lfc/powerlsfactor/queryData?caseID="+caseID+"' />",
        datatype: "json",
        mtype:"POST",
        height: "auto",
        width: "auto",
        colNames:[
                  'id',
                  "<fmt:message key='case.valid'/>", 
                  "<fmt:message key='zone'/>", 
                  "<fmt:message key='pasf'/>", 
                  "<fmt:message key='pisf'/>",
                  "<fmt:message key='lasf'/>",
                  "<fmt:message key='lisf'/>",
                  'modeID'
                  ],
        colModel:[
                  {name:'id',index:'id', width:100,hidden:true},
                  {name:'valid',index:'valid', width:100,editable:true,
                	  formatter:formatValid,
					  editable:true,edittype:'checkbox',
		        	  editoptions:{value:'1:0',defaultValue:'1'}
                  },
                  {name:'zoneName',index:'zoneName', width:150,editable:true},
                  {name:'factorPG',index:'factorPG', width:100,editable:true},
                  {name:'factorQG',index:'factorQG', width:100,editable:true},
                  {name:'factorPL',index:'factorPL', width:100,editable:true},
                  {name:'factorQL',index:'factorQL', width:100,editable:true},
                  {name:'caseID',index:'caseID', width:100,hidden:true},
                 ],
        rowNum:10,
        rowList:[10,20,30],
        pager: '',
        cellEdit:true,
        viewrecords: true,
        jsonReader: { repeatitems : false, id: "id" },
        viewsortcols:[false,'horizontal',false],
        sortable:false,
        sortorder:"asc",
        sortname:"id",
        multiselect: true,
        cellurl:"<c:url value='/lfc/powerlsfactor/save'/>",
    	cellsubmit: 'remote',
        gridComplete: function() {
        	var $selecAll = $("#cb_plsfList");
        	var cb_title = "<fmt:message key='select.all' bundle='${commonResources}'/>" ;
        	if($selecAll){
        		$selecAll.attr("title",cb_title);
        	}
        	//设置全选checkbox title
            var rowIds = jQuery("#plsfList").jqGrid('getDataIDs');
            for(var k=0; k<rowIds.length; k++) {
               var curRowData = jQuery("#plsfList").jqGrid('getRowData', rowIds[k]);
               var curChk = $("#"+rowIds[k]+"").find(":checkbox");
               //curChk.attr('title', curRowData.modeName);   //给checkbox赋予额外的属性值
            }
            
        },
        onSortCol:function(index,iCol,sortorder){
        	return false ;
        },
        ondblClickRow: function (rowid,iRow,iCol,e) {
        	/*var $plsfList = $("#plsfList");
        	if (isRowNeedSave($plsfList)){
        		showMessage("请先保存");
        	}else{
        		$("#operate").val("update");
        		newrowid = rowid ;
	        	$plsfList.setGridParam({cellEdit:false});
	        	$plsfList.jqGrid('editRow', rowid, true);
	        	//确定按钮可用
	            $("#confirm_btn").attr("disabled",false);
	        	
        	}*/
        },
        beforeSubmitCell:function(rowid, cellname, value, iRow, iCol){
         //列提交前的拦截方法
        	var $plsfList = $("#plsfList") ;
        	var $editUrl = '<c:url value='/lfc/powerlsfactor/save'/>' ;
         //设置列提交的url。updateCellName:要编辑的列名 ;updateCellValue :是编辑的值
        	$editUrl = addParamToUrl($editUrl,'updateCellName',iCol == 3 ? cellArray['zoneID'] :cellArray[cellname]);
        	$editUrl = addParamToUrl($editUrl,'updateCellValue',iCol == 3 ? $("#zone_id").val():value);
         //给jqgrid 从新设置cellurl 值
        	$plsfList.setGridParam({cellurl:$editUrl});
        	return false ;
        },
        afterEditCell:function(rowid, cellname, value, iRow, iCol){
        //动态修改lie时,当列 变为可修改状态时,给列add一个button,且列中元素不可编辑,点击button  弹出一个模态窗口,可以选择元素 ,赋值给grid当前编辑列中单行表单域中.
        	$("#"+rowid+" input[type='checkbox']").attr("checked",value == "<fmt:message key='case.valid'/>" ? true:false);
        	if(iCol==3){
        		$("#irowNum").val(rowid);
        		var $data = $("#"+rowid +">td"); //获取这个行里所有的td元素,即:获取所有子元素
        		$zoneInput = $data.find("input").eq("1") ;
        		$zoneInput.css("width","100px");
        		$zoneInput.attr("disabled",true);
        		$zoneInput.after("<input type='button' value='选择' onclick='fnCallDialogForEidt()' />");
    		}
        }

    });

 
//grid添加新的一行
var newrowid ;
function addRow()
{
	$("#operate").val("");
	var selectedId = $("#plsfList").jqGrid("getGridParam", "selrow"); 
	var ids = jQuery("#plsfList").jqGrid('getDataIDs');
	//获得当前最大行号(数据编号)
	var rowid = Math.max.apply(Math,ids);
	//获得新添加行的行号(数据编号)
	newrowid = rowid+1;
    var dataRow = {  
    	id: "",
    	valid:"",
    	zoneID:'',
    	factorPG:'',
    	factorQG:'',
    	factorPL:'',
    	factorQL:'',
    	caseID:''
    };    
    
    //将新添加的行插入到第一列
    $("#plsfList").jqGrid("addRowData", newrowid, dataRow, "first");
    //设置grid单元格不可编辑
    $("#plsfList").setGridParam({cellEdit:false});
    //设置grid单元格可编辑
    $('#plsfList').jqGrid('editRow', newrowid, false);
    //确定按钮可用
    $("#confirm_btn").attr("disabled",false);
    //给添加的列加选择按钮
    var $zoneInput = $("#"+newrowid+"_zoneName");
    $zoneInput.attr("disabled",true).css("width",100);
	$zoneInput.after("<input type='button' value='选择' onclick='fnCallDialogForEidt()' />");
    
}

 
function insertPlsf(){
	var $plsfList = $("#plsfList") ;
	var $operate = $("#operate").val();
	//设置grid单元格可编辑
	$plsfList.setGridParam({cellEdit:true});
	//设置grid行不可编辑
	//$plsfList.jqGrid('editRow', newrowid, false);
	//拼接请求的url
	var url = '<%=basePath%>'+"/lfc/powerlsfactor/save" ;
	var $params = $plsfList.find("input[id^="+newrowid+"]");
	var $check_val = $params.eq(0).is(':checked') ? 1:0;
	url = addParamToUrl(url,'valid',$check_val);
	url = addParamToUrl(url,'zoneID',$("#zone_id").val());
	url = addParamToUrl(url,'factorPG',$params.eq(2).val());
	url = addParamToUrl(url,'factorQG',$params.eq(3).val());
	url = addParamToUrl(url,'factorPL',$params.eq(4).val());
	url = addParamToUrl(url,'factorQL',$params.eq(5).val());
	
	var $caseID = $("#caseID").val();
	url = addParamToUrl(url,'caseID',$caseID);

	$.ajax({url:url,type:"post",timeout:5000, 
		    success:function(data){
		        showMessage(data);
		        reloadGrid();
	   		}
	});
	//将新添加行号 初始为空
	newrowid = '' ;
	//确定按钮不可用
    $("#confirm_btn").attr("disabled",true);
}


//格式zone列输出内容
function formatZone(cellvalue, options, rowObject){
	if(cellvalue == 0){
		return 0;
	}else if(cellvalue == 1){
		return 1;
	}else if(cellvalue == 2){
		return 2;
	}else{
		return 3;
	}
}


function isRowNeedSave($jqgrid){
	var $editTr = $jqgrid.find("tr[editable=1]") ;
	var flag = false ;
	if ( $editTr && $editTr.length > 0){
		flag = true ;
	}
	return flag ;
}


function cancel(){
	reloadGrid();
	//确定按钮不可用
    $("#confirm_btn").attr("disabled",true);
    //设置grid单元格可编辑
    $("#plsfList").setGridParam({cellEdit:true});
    //设置grid单元格可编辑
    $('#plsfList').jqGrid('editRow', newrowid, true);
}



function fnCallDialogForEidt(){
	//获得当前行号(数据编号)
	var returnValue = "";
	returnValue = window.showModalDialog("<c:url value='/element/zone/query?caseID="+$("#caseID").val()+"' />",window,"");
	if(returnValue==""||returnValue==null)
		return;
	var $plsfList = $("#plsfList");
	var $params = $plsfList.find("input[id$='zoneName']");
	var names = returnValue.split(",");
	$params.eq(0).val(names[1]);
	$("#zone_id").val(names[0]);
}








  • 大小: 2.8 KB
  • 大小: 4.4 KB
分享到:
评论

相关推荐

    jqgrid行编辑+动态为其他列赋值

    在本例中,我们将深入探讨如何实现"jqgrid行编辑+动态为其他列赋值"这一功能。 首先,我们需要理解jqGrid的行编辑功能。jqGrid允许用户在表格的每一行上进行编辑,这通常通过双击或点击编辑按钮来触发。默认情况下...

    jqgrid 编辑表格 一列

    在 `colModel` 中,为需要编辑的列添加 `editable: true`: ```javascript colModel: [ { name: 'id', index: 'id', width: 50, editable: false }, { name: 'name', index: 'name', width: 100, editable: true ...

    jqgrid合并单元格,合并行、合并列

    jqgrid合并行、合并列 先看示例图片最终效果: jqgrid合并单元格 .jqgrid { width: 80%; margin: 0 auto; } /* 这个代码是解决表头有一点点错位的问题 */ .ui-state-default, .ui-widget-content .ui-state...

    数据表格JqGrid自适应列宽度

    2. **列模型配置**:每个列在JqGrid中都有一个对应的列模型(`colModel`),其中可以设置列的宽度。使用`autoResizable: true`属性,可以开启列的自动调整大小功能。 3. **自适应事件处理**:JqGrid提供了`...

    jqGrid表头锁列及排序功能细节

    一、jqGrid 添加列的大标题 jqGrid 提供了设置列组标题的功能,允许为多列设置一个共同的标题头部,提升表格的可读性。实现这一功能的代码如下: ```javascript jQuery("#grid_id").jqGrid('setGroupHeaders', { ...

    jqgrid_位于上端的合计行.

    它提供了丰富的功能,包括数据分页、排序、过滤、编辑以及我们关注的主题——上端合计行。"jqgrid_位于上端的合计行" 指的是在 jqGrid 表格的顶部显示总计行,用于快速汇总列表中的数值数据。 要实现这个功能,我们...

    jqgrid jqgrid 增删查改 添加toolbar 不保存到数据库 artdialog 弹出框

    jqgrid jqgrid 增删查改 添加toolbar 不保存到数据库 artdialog 弹出框

    获取jqGrid中选择的行的数据

    下面可以获取选择一行的id,如果你选择多行,那下面的id是最后选择的行的id: var id=$(‘#gridTable').jqGrid(‘getGridParam','selrow'); 如果想要获取选择多行的id,那这些id便封装成一个id数组,那可以使用以下...

    jqGrid4.5.2强大的多列排序终于有了

    在jqGrid4.5.2版本中,一个备受期待的功能——多列排序终于被引入,极大地提升了用户交互体验和数据管理效率。在此之前,jqGrid只支持单列排序,而多列排序的加入使得用户可以根据多个字段进行复杂的数据筛选和排列...

    JQGrid的用法解析(列编辑,添加行,删除行)

    它提供了丰富的功能,包括列编辑、添加行和删除行等操作。在本文中,我们将深入解析JQGrid如何实现这些功能。 首先,JQGrid的初始化是通过jQuery的$(document).ready()函数来触发的。在`initPlsfList`函数中,我们...

    jqgrid 表格的增删改查以及modal弹出框

    如果用户确认,jqGrid 将发送一个请求到服务器删除选定的行,并刷新表格以反映变化。 **修改(Edit)**:编辑现有记录同样使用 `editGridRow` 方法,不过这次是在选中的行上。在这个项目中,用户选择一行后,点击...

    Jquery 实现列的拖动 jquery grid

    然后在数据中添加子行标识,例如: ```json { "id": 1, "dataField": "value", "children": [ // 子行数据... ] } ``` 在初始化Grid时,使用`subGrid`选项启用子网格功能: ```javascript $("#jqGrid")....

    jqgrid 解决冻结栏高度不一致的问题,修改了源代码

    jqgrid 采用冻结栏之后往往会出现冻结的栏的高度和非冻结栏高度的不一致,滚动滚动条的时候出现冻结栏的div小好几个px 的问题

    jqgrid动态创建列与列合计事例

    jqgrid初始化时动态创建列并对这些列数值进行合计 生成动态列的数据源可以通过ajax获取或者前端自定义数据集

    jqGrid的表格数据呈编辑转态

    ### jqGrid表格数据呈编辑状态知识点详解 #### 一、jqGrid简介 jqGrid是一款功能强大的jQuery插件,用于在网页上实现数据网格展示。它不仅支持数据展示,还提供了丰富的交互功能,如排序、搜索、分页等,并且允许...

    JqGrid插件+JqGridDemo+JqGrid主题

    它基于jQuery库,提供了丰富的功能,如数据排序、筛选、分页、编辑、添加、删除和保存等,极大地增强了网页中表格的交互性和数据管理能力。这款插件在前端开发中广泛应用于数据密集型应用,例如报表系统、管理系统等...

    JqGrid中文API文档

    JqGrid还提供了其他高级功能,如行选择、列自适应、导出数据、树形结构展示等。通过配置`multiselect`、`autoresizeAllColumns`、`gridview`等参数,可以启用这些特性。 通过深入学习JqGrid中文API文档,开发者可以...

    jqgrid应用

    - **行操作**:可以添加编辑、删除和保存按钮,通过`edit`、`del`和`add`参数设置,同时可以通过`editData`传递额外的编辑参数。 3. **事件处理** - **行操作事件**:如`onSelectRow`用于选中行时触发,`...

    table表格样式利用jqgrid实现

    对于表格操作,jqGrid支持行选择、行编辑和行删除。通过设置`multiselect`参数,可以开启多选模式;`inlineNav`或`editGridRow`方法可以实现行内编辑;`delGridRow`用于删除选中的行。 最后,别忘了在HTML中引入...

    jqGrid4.6完整包

    - 行操作:包括新增、编辑、删除、复制、剪切、粘贴等操作。 - 自定义列:可以自定义列的宽度、对齐方式、标题、格式化函数等。 - 国际化:支持多语言,可以根据需要加载不同的本地化文件。 6. **事件处理**:...

Global site tag (gtag.js) - Google Analytics