jqgrid(Jqgrid的表格功能)

在js中怎么改变jqgrid行数据

1 jqGrid动态增加列，

目前还没有这样的方法

只能先卸载Grid再进行重绘，才能达到改变列的目的。

J*a代码

jQuery('#grid1').GridUnload();

用这个方法卸载jqgrid

然后重新设置吧

J*a代码

jQuery('#grid1').jqGrid({

colNames:…,

colModel:…,

…

});

2用本地数据修改表格

这个必须先把数据类型改成local

J*a代码

$('#lgrid-1').jqGrid().clearGridData();

$('grid-1').jqGrid('setGridParam',

{ datatype:local,

rowNum:data.length,

data:data

}

).trigger('reloadGrid', [{page:1}]);

一旦用本地数据分页功能就不好用了,因为不会再去查后台了

3修改多条同时提交后台

J*a代码

var s*edRow= null;

var s*edCol= null;

//修正

$('#lgrid-3').setGridParam({

beforeEditCell: function(rowid, cellname, value, iRow, iCol){

//记录修改的表格

s*edRow= iRow;

s*edCol= iCol;

}

});

//向后台发送数据前保存表格的修改

if(s*edRow&& s*edCol){

jQuery('#grid-3').jqGrid('s*eCell', s*edRow, s*edCol);

}

//取得表格的数据全部

var data=$('#grid-3').jqGrid().getRowData();

4隐藏列

J*a代码

jQuery('#grid_id').hideCol('somecol').trigger('reloadGrid');

显示用 showCol

5可以多选的情况下默认选中

J*a代码

$('#list').jqGrid().setSelection(1);

如果已经被选中则是反选

6数据绑定前检查

J*a代码

ajaxGridOptions:

{dataFilter:

function(data,dataType){// preprocess the data

if($(data).find(“code”).text()=='problem'){// check for an error in the result

$(“#list”).jqGrid('GridUnload');

$(“#errormsg”).text($(data).find(“description”).text());

}else{

return data;

}

}

}

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/s*e'/>”,

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(isRowNeedS*e($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/s*e'/>';

//设置列提交的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/s*e”;

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 isRowNeedS*e($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]);

}

HTML中用jqgrid制作表格标题栏怎么没边框线

一、如何在html的表格中加入边框线

只对table标签设置border（边框）样式，将让此表格最外层table一个边框，而表格内部不产生边框样式。

案例详细如下：

1、对应css代码

<style>

.table-a table{border:1px solid#F00}

/* css注释：只对table标签设置红色边框样式*/

</style>

2、对应html代码片段

<div class=”table-a”>

<table width=”400″ border=”0″ cellspacing=”0″ cellpadding=”0″>

<tr>

<td width=”105″>站名</td>

<td width=”181″>网址</td>

<td width=”112″>说明</td>

</tr>

<tr>

<td>DIVCSS</td>

<td>域名</td>

<td>CSS学习</td>

</tr>

<tr>

<td>CSS5</td>

<td>域名</td>

<td>CSS切图</td>

</tr>

</table>

</div>

3、案例截图

二、对td设置边框

对table表格td设置边框样式，表格对象内td将实现边框样式，但中间部分td会导致出现双边框。

详细案例教程如下：

1、对应css代码

<style>

.table-b table td{border:1px solid#F00}

/* css注释：只对table td标签设置红色边框样式*/

</style>

2、对应html源代码片段

3、案例截图

三、对table和td技巧性设置表格边框-

如上第二点，只对表格对象td设置单一边框样式，中间部分td与td标签之间就会出现双边框现象。

解决方法：对td只设置两个边的边框，对table也设置两个边的边框样式。

解释：对td设置左与上边框，这样td与td相邻就会只出现单一边框样式，这样就会出现表格右侧和下部没有边框，这个时候我们设置table右和下边框解决显示右侧和下侧td剩下未显示边框。

1、对应css代码：

<style>

.table-c table{border-right:1px solid#F00;border-bottom:1px solid#F00}

.table-c table td{border-left:1px solid#F00;border-top:1px solid#F00}

/*

css注释：

只对table td设置左与上边框；

对table设置右与下边框；

为了便于截图，我们将css注释说明换行排版

*/

</style>

2、对应html源代码片段：

<div class=”table-c”>

<table width=”400″ border=”0″ cellspacing=”0″ cellpadding=”0″>

<tr>

<td width=”105″>站名</td>

<td width=”181″>网址</td>

<td width=”112″>说明</td>

</tr>

<tr>

<td>DIVCSS</td>

<td>域名</td>

<td>CSS学习</td>

</tr>

<tr>

<td>CSS5</td>

<td>域名</td>

<td>CSS切图</td>

</tr>

</table>

3、表格边框实现案例截图

四、对table和td设置背景，实现完美表格边框

1）、先设置table css背景为红色

2）、设置table单元之间间距为1

使用DW软件辅助设置table表格单元间距为1，具体DW软件可视化*作步骤简要说明，首先（视图模式）选中表格后，对应DW软件编辑窗口底部会“属性”面板会出现对应table表格属性设置地方，我们将“间隔”填写为“1”。这个时候我们会看到table表格标签里cellspacing值为“1”（cellspacing=”1″）。

借助DW软件设置表格单元之间间距

或

直接对<table>标签内cellspacing=”1″即可，得到：

<table width=”400″ border=”0″ cellspacing=”1″ cellpadding=”0″>

3）、设置table td背景为白色

2、css代码：

<style>

.table-d table{ background:#F00}

.table-d table td{ background:#FFF}

/*

css注释：设置table背景为红色，td背景为白色*/

</style>

3、对应html源代码：

<div class=”table-d”>

<table width=”400″ border=”0″ cellspacing=”1″ cellpadding=”0″>

<tr>

<td width=”105″>站名</td>

<td width=”181″>网址</td>

<td width=”112″>说明</td>

</tr>

<tr>

<td>DIVCSS</td>

<td>域名</td>

<td>CSS学习</td>

</tr>

<tr>

<td>CSS5</td>

<td>域名</td>

<td>CSS切图</td>

</tr>

</table>

</div>

4、表格边框案例截图

五、css table表格边框实现总结

以上四种方式实现table表格边框样式方法，推荐使用第三和第四种方法来解决表格边框样式。table边框布局方法并能掌握，平时需要时灵活运用。