博客访问： 56134
博文数量： 12
博客积分： 1410
博客等级： 上尉
技术积分： 144
注册时间：
IT168企业级官微
微信号：IT168qiye
系统架构师大会
微信号：SACC2013
分类： 系统运维
这里给出一种可动态增加、删除、修改和保存数据的web表格简易实现。思想很常规，javascript代码在关键地方给出了一些注释。有兴趣的朋友可以把玩一下。转载请注明出处！
先给出三张效果图：
图一：常态
图二：添加行状态
图三：修改列状态
panama_table.jsp
<%@ page language="java" contentType="text/ charset=utf-8"&&&&pageEncoding="utf-8"%>
Insert title here
panama_table.js
/**&* Panama-ajaxtools: panama_table&* @version: 0.1 beta 1&* @date: Oct 5th 2008&* @author: yunyuaner&* @contact: &*/function SwitchToEditMode(){&&&&var value = this.innerHTML;&&&&if (this.__mode == "plain")&&&&{&&&&&&&&this.__mode = "edit";&&&&&&&&var input = document.createElement("input");&&&&&&&&input.id = "__curr";&&&&&&&&input.type = "text";&&&&&&&&input.value = value;&&&&&&&&input.style.width = 60;&&&&&&&&input.style.height = 20;&&&&&&&&input.onblur = SwitchToPlainMode;&&&&&&&&this.replaceChild(input, this.firstChild);&&&&&&&&input.focus();&&&&}}function SwitchToPlainMode(){&&&&var parent = this.parentNode;&&&&parent.innerHTML = this.value;&&&&parent.__mode = "plain";}function PanamaTableInit(){&&&&&&&&PanamaTableInvalidate();}function PanamaTableInvalidate(){&&&&var pTable = document.getElementById("panama_table");&&&&var pTableRows = pTable.getElementsByTagName("tr");&&&&for (var i = 0; i < pTableRows.length; i++)&&&&{&&&&&&&&pTableCells = pTableRows[i].getElementsByTagName("td");&&&&&&&&pTableRows[i].className = i % 2 ? "panama_table_row_odd" : "panama_table_row_even";&&&&&&&&for (var j = 1; j < pTableCells.length; j++)&&&&&&&&{&&&&&&&&&&&&pTableCells[j].className = "panama_table_cell";&&&&&&&&&&&&pTableCells[j].onclick = SwitchToEditMode;&&&&&&&&&&&&if (pTableCells[j].__mode == null)&&&&&&&&&&&&&&&&pTableCells[j].__mode = "plain";&&&&&&&&}&&&&}&&&&/* Exclusive of checkbox filed */&&&&pTable.__cellsPerRow = 3;}function PanamaTableGetRowNodeFromCellElem(e){&&&&return e.parentNode.parentNode;}function PanamaTableDeleteRow(){&&&&var pTable = document.getElementById("panama_table");&&&&var rowsToDel = new Array();&&&&var chkboxFileds_NoFiltered = pTable.getElementsByTagName("input");&&&&/* Select the rows to be delete */&&&&for (var i = 0, j = 0; i < chkboxFileds_NoFiltered.length; i++)&&&&{&&&&&&&&if (chkboxFileds_NoFiltered[i].type == "checkbox" && chkboxFileds_NoFiltered[i].checked)&&&&&&&&{&&&&&&&&&&&&rowsToDel[j++] = PanamaTableGetRowNodeFromCellElem(chkboxFileds_NoFiltered[i]);&&&&&&&&&&&&&&&&&&&&}&&&&}&&&&for (var k = 0; k < rowsToDel.length; k++)&&&&{&&&&&&&&/* Note: pTable.firstChild of pTable is tbody */&&&&&&&&pTable.firstChild.removeChild(rowsToDel[k]);&&&&}&&&&PanamaTableInvalidate();}function PanamaTableAppendRow(){&&&&var pTable = document.getElementById("panama_table");&&&&var newRow = document.createElement("tr");&&&&var newCells = new Array();&&&&var cellInputs = new Array();&&&&var chkboxFiledContainer = document.createElement("td");&&&&var chkboxFiled = document.createElement("input");&&&&chkboxFiled.type = "checkbox";&&&&chkboxFiledContainer.appendChild(chkboxFiled);&&&&newRow.appendChild(chkboxFiledContainer);&&&&chkboxFiled.focus();&&&&&&&&for (var i = 0; i < pTable.__cellsPerRow; i++)&&&&{&&&&&&&&newCells[i] = document.createElement("td");&&&&&&&&newCells[i].__mode = "edit";&&&&&&&&cellInputs[i] = document.createElement("input");&&&&&&&&cellInputs[i].type = "text";&&&&&&&&cellInputs[i].style.width = 60;&&&&&&&&cellInputs[i].style.height = 20;&&&&&&&&newCells[i].appendChild(cellInputs[i]);&&&&&&&&newRow.appendChild(newCells[i]);&&&&}&&&&&&&&/* Note: pTable.firstChild of pTable is tbody */&&&&pTable.firstChild.appendChild(newRow);&&&&/* Rebuild table to set table style */&&&&PanamaTableInvalidate();}function PanamaTableSelAll(){&&&&var cbList = document.getElementById("panama_table").getElementsByTagName("input");&&&&var status = this.checked ? false : true;&&&&for (var i = 0; i < cbList.length; i++)&&&&&&&&cbList[i].checked = status;&&&&&&&&this.checked = status;}function PanamaTableSave(){&&&&var pTable = document.getElementById("panama_table");&&&&var rows = pTable.getElementsByTagName("tr");&&&&&&&&/* Change new row from edit mode to plain mode */&&&&for (var i = 0; i < rows.length; i++)&&&&{&&&&&&&&cells = rows[i].getElementsByTagName("td");&&&&&&&&/* Skip the chkbox filed */&&&&&&&&for (var j = 1; j < cells.length; j++)&&&&&&&&{&&&&&&&&&&&&if (cells[j].firstChild.nodeName.toLowerCase() == "input")&&&&&&&&&&&&{&&&&&&&&&&&&&&&&/* FIXME: value may be null */&&&&&&&&&&&&&&&&cells[j].innerHTML = cells[j].firstChild.value;&&&&&&&&&&&&&&&&cells[j].__mode = "plain";&&&&&&&&&&&&}&&&&&&&&} &&&&}&&&&&&&&/* Parse data in table */&&&&var tableTextList = new Array();&&&&for (i = 0; i < rows.length; i++)&&&&{&&&&&&&&var rowTextList = new Array();&&&&&&&&var cells = rows[i].getElementsByTagName("td");&&&&&&&&for (j = 1; j < cells.length; j++)&&&&&&&&&&&&rowTextList[j-1] = cells[j].innerHTML;&&&&&&&&tableTextList[i] = rowTextList;&&&&}&&&&var xmlDoc = "";&&&&xmlDoc += "";&&&&for (var m = 0; m < tableTextList.length; m++)&&&&{&&&&&&&&xmlDoc += ""&&&&&&&&for (var n = 0; n < tableTextList[m].length; n++)&&&&&&&&{&&&&&&&&&&&&xmlDoc += "" + tableTextList[m][n] + "";&&&&&&&&}&&&&&&&&xmlDoc += ""&&&&}&&&&xmlDoc += "";&&&&xmlDoc += "";&&&&/* Note: Encode string from iso-8859-1 to uri */&&&&xmlDoc = encodeURIComponent(xmlDoc);&&&&/* Post data to hidden iframe */&&&&var hiddenIframe = document.createElement("iframe");&&&&hiddenIframe.style.display = "none";&&&&hiddenIframe.src = "about:blank";&&&&hiddenIframe.id = "hiddenIframe"&&&&document.body.appendChild(hiddenIframe);&&&&var hiddenIframe = document.getElementById("hiddenIframe");&&&&var hiddenDocument = hiddenIframe.contentWindow.document;&&&&var hiddenSrc = "
";&&&&hiddenDocument.open();&&&&hiddenDocument.write(hiddenSrc);&&&&hiddenDocument.close();&&&&var hiddenForm = hiddenDocument.getElementById("hiddenForm");&&&&var hiddenXMLTmpBox = hiddenDocument.getElementById("hiddenXMLTmpBox");&&&&hiddenXMLTmpBox.value = xmlDoc;&&&&hiddenForm.action = "http://localhost:8080/biobase/poweroper/iframe/autosync.action";&&&&hiddenForm.submit();}
AutoSync.java
package biobase.experi;import java.io.*;import java.nio.*;import java.nio.charset.*;import java.nio.channels.*;import java.text.SimpleDateFormat;import java.util.Date;import java.util.Map;import java.net.*;import com.opensymphony.xwork2.ActionContext;import com.opensymphony.xwork2.ActionSupport;@SuppressWarnings("serial")public class AutoSync extends ActionSupport {&&&&private InputStream inputStream;&&&&private String hiddenXMLTmpBox;&&&&public InputStream getInputStream() {&&&&&&&&return inputStream;&&&&}&&&&public String getHiddenXMLTmpBox() {&&&&&&&&return hiddenXMLTmpBox;&&&&}&&&&public void setHiddenXMLTmpBox(String tmpBox) {&&&&&&&&hiddenXMLTmpBox = tmpBox;&&&&}&&&&public void setInputStream(InputStream inputStream) {&&&&&&&&this.inputStream = inputStream;&&&&}&&&&public String execute()&&&&{&&&&&&&&try {&&&&&&&&&&&&/* TODO: Parse dirtyTableXML and save */&&&&&&&&&&&&String dirtyTableXML = URLDecoder.decode(hiddenXMLTmpBox, "UTF-8");&&&&&&&&&&&&System.out.println(dirtyTableXML);&&&&&&&&} catch (UnsupportedEncodingException e) {&&&&&&&&&&&&e.printStackTrace();&&&&&&&&}&&&&&&&&StringBuilder xmlText = new StringBuilder();&&&&&&&&xmlText.append("");&&&&&&&&xmlText.append("");&&&&&&&&&&&&&&xmlText.append("");&&&&&&&&String strXMLText = xmlText.toString();&&&&&&&&Charset cset = Charset.forName("utf-8");&&&&&&&&ByteBuffer b = cset.encode(strXMLText);&&&&&&&&this.inputStream = new ByteArrayInputStream(b.array());&&&&&&&&&&&&&&&&return SUCCESS;&&&&}&&&&}
struts.xml
&&&&&&&&&&&&&&&&&&&&&&&&
阅读(7128) | 评论(0) | 转发(0) |
相关热门文章
给主人留下些什么吧！~~
请登录后评论。button.css
简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。
button.css 由 100素材网开发，欢迎广大前端码农使用。有好的建议欢迎给我们哦！
可双击编辑table表格里数据的jQuery插件代码
发布时间： 17:04:59
Copyright @ 2014-, All Rights Reserved温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
& & & & 市委考核系统中，用户有了新的要求。达到的效果& & & & 描述：档次字段双击实现添加功能，选中修改的字段，点击保存添加到数据库中，点击撤销，修改的字段值返回到初始的值。具体实现& & & & 总成绩的汇总是动态进行的，要想实现添加档次字段，并且保存它，需要添加相应的表进行保存相应的值，这里添加的表中的字段，仅仅有对象ID，年份，档次，这样是为了达到这样的效果，实现成绩的动态计算，且保存档次字段值。& & & & 具体的显示逻辑：获得每个对象的总成绩汇总，形成一个虚拟表，从新添加的物理表中获得该年份所有对象ID和对应的档次，将这两个虚拟表进行拼接，然后显示出来。具体的修改逻辑：用户提交修改的记录，然后根据提交对象ID和年份，查询添加表，看看是否存在该条记录，存在则更新，不存在则添加。& & & & 对于后台的代码，主要是通过文字的形式描述的，对于页面上，这里提供出主要的代码，有兴趣的自己可以看一下。& & & &页面核心代码&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. i++) {
var col = $(this).datagrid('getColumnOption', fields[i]);
col.editor1 = col.
if (fields[i] != param.field) {
col.editor =
$(this).datagrid('beginEdit', param.index);
for (var i = 0; i & fields. i++) {
var col = $(this).datagrid('getColumnOption', fields[i]);
col.editor = col.editor1;
var editIndex =
//结束编辑
function endEditing() {
if (editIndex == undefined) { return true }
if ($('#dg').datagrid('validateRow', editIndex)) {
$('#dg').datagrid('endEdit', editIndex);
editIndex =
//双击事件
function onDblClickCell(index, field) {
if (endEditing()) {
$('#dg').datagrid('selectRow', index)
.datagrid('editCell', { index: index, field: field });
editIndex =
//保存按钮,多条数据一起提交
function saveAllData() {
if (endEditing()) {
//获取年份
var checkedYearValue = $("#cc1").combobox('getText');
//DataGrid的更改行不为0
if ($("#dg").datagrid('getChanges').length) {
//获取插入更改的行的集合
var inserted = $("#dg").datagrid('getChanges', "inserted");
//获取删除更改的行的集合
var deleted = $("#dg").datagrid('getChanges', "deleted");
//获取更新更改的行的集合
var updated = $("#dg").datagrid('getChanges', "updated");
var effectRow = new Object();
if (inserted.length) {
effectRow["inserted"] = JSON.stringify(inserted);
if (deleted.length) {
effectRow["deleted"] = JSON.stringify(deleted);
if (updated.length) {
effectRow["updated"] = JSON.stringify(updated);
var row = $('#dg').datagrid('getSelections');
if (row.length & 1) {
$.messager.alert('提示', '请至少选择一条数据!', 'info');
if (row.length &= 1) {
for (var i = 0; i & row. i++) {
var Data = row[i].县市区ID;
if (Data == "" || Data == null) {
alert("没有数据");
$('#dg').datagrid('unselectRow', i);
row = $('#dg').datagrid('getSelections');
//用户向一般处理程序传值
var type = "Town";
var data1 = new Object();
var obj = new Object();
obj.yearValue = checkedYearV
data1.array =
data1.obj =
data1.type =
var jsonObject = JSON.stringify(data1);
$.post("FourTypeResultLevel.ashx", { jsonObject: jsonObject }, function (data) {
alert(data);
//撤销按钮
function reject() {
$('#dg').datagrid('rejectChanges');
editIndex =
&/script&&table id="dg"
title="干部总成绩"
class="easyui-datagrid"
striped="true"
style="width: &%=width %&px"
autoRowHeight="true"
data-options="iconCls: 'icon-edit',
toolbar: '#tb',
url:'TownResultsTotal.ashx',
method:'get',
onDblClickCell: onDblClickCell"
pagination="false"
rownumbers="true"
fitcolumns="true"
singleSelect="false" &
&tr id="jsTh"&
&div id="tb" style="height: auto"&
&a href="javascript:void(0)" id="saveButton" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="saveAllData()"&保存&/a&
&a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onclick="reject()"&撤销&/a&
&/div&& & & & 注意：1、DataGrid的表头要注册双击事件对应的相应函数名；2、对于DataGrid中行的状态只有修改状态，但是在程序中还是写出了其他的的其中状态。总结& & & & 这里用到的EasyUI中的控件，所以需要引用一些CSS和JS等内容，其他的具体东西大家可以去晚上搜一下。& & & &
阅读(22552)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
loftPermalink:'',
id:'fks_',
blogTitle:'实现EasyUI中DataGrid单个表格的编辑',
blogAbstract:'背景& & & & 市委考核系统中，用户有了新的要求。达到的效果& & & & 描述：档次字段双击实现添加功能，选中修改的字段，点击保存添加到数据库中，点击撤销，修改的字段值返回到初始的值。具体实现& & & & 总成绩的汇总是动态进行的，要想实现添加档次字段，并且保存它，需要添加相应的表进行保存相应的值，这里添加的表中的字段，仅仅有对象ID，年份，档次，这样是为了达到这样的效果，实现成绩的动态计算，且保存档次字段值。& & & & 具体的显示逻辑：获得每个对象的总成绩汇总，形成一个虚拟表，从新添加的物理表中获得该年份所有对象ID和对应的档次，将这两个虚拟表进行拼接，然后显示出来。具体的修改逻辑：用户提交修改的记录，然后根据提交对象ID和年份，查询添加表，看看是否存在该条记录，存在则更新，不存在则添加。',
blogTag:'',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:7,
publishTime:7,
permalink:'blog/static/',
commentCount:13,
mainCommentCount:11,
recommendCount:1,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'',
hmcon:'1',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}
