easyui datagrid增加一行或删除一行

来源：互联网发布：数据统计的软件编辑：程序博客网时间：2024/05/01 10:56

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="UTF-8">
<title>Cell Editing in DataGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/common.css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.3.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jquery-easyui-1.3.3/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jquery-easyui-1.3.3/themes/icon.css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
<div style="margin:20px 0;"></div>
<a href="javascript:save()" class="easyui-linkbutton" iconCls="icon-ok">保存</a>
<table id="dg" class="easyui-datagrid" title="Cell Editing in DataGrid" style="width:700px;height:400px"
data-options="
iconCls: 'icon-edit',
url: 'datagrid_data.json',
method:'get',
onClickCell: onClickCell
">
<thead>
<tr>
<th field="cb" checkbox="true" align="center"></th>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'productid',width:100,editor:'text'">Product</th>
<th data-options="field:'listprice',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right',editor:'combobox'">Unit Cost</th>
<th data-options="field:'attr1',width:250,editor:'text'">Attribute</th>
<th data-options="field:'status',width:60,align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}">Status</th>
</tr>
</thead>
</table>
<div id="tb">
<a href="javascript:append()" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" id="addButton">新增</a>
<a href="javascript:remove()" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" id="delButton">删除</a>
</div>

<script type="text/javascript">
var editIndex = undefined;
//添加一行
function append() {
if (endEditing()) {
$('#dg').datagrid('appendRow', { });
editIndex = $('#dg').datagrid('getRows').length - 1;
$('#dg').datagrid('selectRow', editIndex)
.datagrid('beginEdit', editIndex);
}
}

//添加一行带数据
function insert() {
if (endEditing()) {
// var rows = $('#dg').datagrid('getFooterRows');
var rows = $('#dg').datagrid('getRows')//获取当前页的数据行
var itemid= rows[0]['itemid']; //获取指定列
alert(itemid);
$('#dg').datagrid("insertRow", { //这里还有一个index参数，可指定添加到某行。如果不写，默认为在最后一行添加
row: {itemid:itemid,
productid:'10',
}
});
}

}

//还有一种情况，就是表格中没有数据时新添加一条带参数的数据

function insert() {
   if (endEditing()) {
   $('#dg').datagrid("insertRow", { //这里还有一个index参数，可指定添加到某行。如果不写，默认为在最后一行添加
   row: {itemid:'${参数名}', //当参数来自session或request时取值方法为${参数名}，
   productid:'${参数名}', //当参数为JS传递,或JSP传递过来是，取值方法为${param.参数名}
   }
   });
   }

}

//删除一行
function remove() {
editIndex = $('#dg').datagrid('getRows').length-1 ;
$('#dg').datagrid('deleteRow', editIndex);
editIndex = undefined;
}

</script>
<script type="text/javascript">
$.extend($.fn.datagrid.methods, {
editCell: function(jq,param){
return jq.each(function(){
var opts = $(this).datagrid('options');
var fields = $(this).datagrid('getColumnFields',true).concat($(this).datagrid('getColumnFields'));
for(var i=0; i<fields.length; i++){
var col = $(this).datagrid('getColumnOption', fields[i]);
col.editor1 = col.editor;
if (fields[i] != param.field){
col.editor = null;
}
}
$(this).datagrid('beginEdit', param.index);
for(var i=0; i<fields.length; i++){
var col = $(this).datagrid('getColumnOption', fields[i]);
col.editor = col.editor1;
}
});
}
});

var editIndex = undefined;
function endEditing(){
if (editIndex == undefined){return true}
if ($('#dg').datagrid('validateRow', editIndex)){
$('#dg').datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
return false;
}
}
function onClickCell(index, field){
if (endEditing()){
$('#dg').datagrid('selectRow', index)
.datagrid('editCell', {index:index,field:field});
editIndex = index;
}
}
</script>
</body>
</html>

1 0