php ajax 表格排序，调整列宽，修改内容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>TableKit</title>
</head>
<body>
<div id="content">
<p>可以点击修改内容，实时显示，没有存入到数据库，调整每个列的宽，点击表格头部排序，升序和降序</p>
<p>www.corange.cn </p>
<table class="sortable resizable editable">
<thead>
<tr><th class="sortfirstdesc" id="urgency">Urgency</th><th id="creation-date">Date</th><th id="time">Time</th><th id="title">Title</th><th id="status">Status</th><th id="author">Requested By</th><th id="cost">Cost</th><th id="size">Size</th></tr>
</thead>
<tfoot>
<tr><td>Urgency</td><td>Date</td><td>Time</td><td>Title</td><td>Status</td><td>Requested By</td><td>Cost</td><td>Size</td></tr>
</tfoot>
<tbody>
<tr id="N938747839"><td><div class="urg5">5</div></td><td>24/10/2005 10:47:41 AM</td><td>10:47:41 AM</td><td><a href="http://www.corange.cn">www.corange.cn</a></td><td>In Progress</td><td>Tom</td><td>$200.00</td><td>30KB</td></tr>
<tr id="N938712239"><td><div class="urg5">5</div></td><td>24/10/2005 10:49:41 AM</td><td>10:49:41 AM</td><td>Keyboard is Broken</td><td>In Progress</td><td>Tom</td><td>$200.00</td><td>30 KB</td></tr>
<tr id="N938744539"><td><div class="urg3">3</div></td><td>24/10/2005 10:49:41 PM</td><td>10:49:41 PM</td><td>Windows is crashing</td><td>New</td><td>Bill</td><td>$300.00</td><td>30MB</td></tr>
<tr id="N938746764"><td><div class="urg4">4</div></td><td>17/02/2006</td><td>12:43:16 PM</td><td>Help, I'm on fire!</td><td>New</td><td>John</td><td>$250.00</td><td>30KB</td></tr>
<tr><td><div class="urg3">3</div></td><td>06/07/2006xxx</td><td>03:04:34 PM</td><td>The ring came off my pudding can</td><td>Assigned</td><td>Tom</td><td>$200.50</td><td>30GB</td></tr>
<tr><td><div class="urg2">2</div></td><td>06/07/2006</td><td>15:06:10</td><td>Should I open this email?</td><td>Assigned</td><td>Tom</td><td>$50.35</td><td>30TB</td></tr>
<tr><td><div class="urg1">1</div></td><td>06/07/2006</td><td>04:12:16 PM</td><td>I can't print</td><td>Assigned</td><td>Bill</td><td>$2005.30</td><td>30KB</td></tr>
<tr><td><div class="urg2">2</div></td><td>31/12/2006</td><td>09:35:47 AM</td><td>The internet is broken</td><td>Assigned</td><td>Jill</td><td>$600.00</td><td>32KB</td></tr>
<tr><td><div class="urg3">3</div></td><td>17/07/2006</td><td>04:21:24 PM</td><td>Blank Screen</td><td>Assigned</td><td>Xavier</td><td>$100.30</td><td>10GB</td></tr>
<tr><td><div class="urg4">4</div></td><td>24/10/2005 01:09:00 AM</td><td>01:09:00 AM</td><td>My cup holder is not working</td><td>Closed</td><td>Mark</td><td>$100.40</td><td>20 MB</td></tr>
<tr><td><div class="urg5">5</div></td><td>24/10/2005 12:47:41 AM</td><td>12:47:41 AM</td><td>Keyboard is Broken</td><td>In Progress</td><td>Tom</td><td>$200.00</td><td>30KB</td></tr>
<tr><td><div class="urg5">5</div></td><td>24/10/2005 01:49:41 PM</td><td>01:49:41 PM</td><td>Keyboard is Broken</td><td>Closed</td><td>Tom</td><td>$200.00</td><td>30 KB</td></tr>
<tr><td><div class="urg3">3</div></td><td>24/10/2005 12:49:41 PM</td><td>12:49:41 PM</td><td>Windows is crashing</td><td>New</td><td>Bill</td><td>$300.00</td><td>30MB</td></tr>
<tr><td><div class="urg4">4</div></td><td>17/02/2006</td><td>12:43:16 PM</td><td>Help, I'm on fire!</td><td>New</td><td>John</td><td>$250.00</td><td>30KB</td></tr>
<tr><td><div class="urg3">3</div></td><td>06/07/2006</td><td>03:04:34 PM</td><td>The ring came off my pudding can</td><td>Assigned</td><td>Tom</td><td>$200.50</td><td>30GB</td></tr>
<tr><td><div class="urg2">2</div></td><td>06/07/2006</td><td>15:06:10</td><td>Should I open this email?</td><td>Closed</td><td>Tom</td><td>$50.35</td><td>30TB</td></tr>
<tr><td><div class="urg1">1</div></td><td>06/07/2006</td><td>04:12:16 PM</td><td>I can't print</td><td>Assigned</td><td>Bill</td><td>$2005.30</td><td>30KB</td></tr>
<tr><td><div class="urg2">2</div></td><td>31/12/2006</td><td>09:35:47 AM</td><td>The internet is broken</td><td>Assigned</td><td>Jill</td><td>$600.00</td><td>32KB</td></tr>
<tr><td><div class="urg3">3</div></td><td>17/07/2006</td><td>04:21:24 PM</td><td>Blank Screen</td><td>Assigned</td><td>Xavier</td><td>$100.30</td><td>10GB</td></tr>
<tr><td><div class="urg4">4</div></td><td>26/07/2006</td><td>03:09:00 PM</td><td>My cup holder is not working</td><td>In Progress</td><td>Mark</td><td>$100.40</td><td>20 MB</td></tr>
</tbody>
</table>
<div id="mainmenu"> </div> <div class="panel" id="doco-tablekit">
</p></div></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>
<script type="text/javascript" src="js/fabtabulous.js"></script>
<script type="text/javascript" src="js/tablekit.js"></script>
<script type="text/javascript">
TableKit.Sortable.addSortType(new TableKit.Sortable.Type('status', {
pattern : /^[New|Assigned|In Progress|Closed]$/,
normal : function(v) {
var val = 4;
switch(v) {
case 'New':
val = 0;
break;
case 'Assigned':
val = 1;
break;
case 'In Progress':
val = 2;
break;
case 'Closed':
val = 3;
break;
}
return val;
}
}
));
TableKit.options.editAjaxURI = 'echo/';
TableKit.Editable.selectInput('urgency', {}, [
['1','1'],
['2','2'],
['3','3'],
['4','4'],
['5','5']
]);
TableKit.Editable.multiLineInput('title');
var _tabs = new Fabtabs('tabs');
$$('a.next-tab').each(function(a) {
Event.observe(a, 'click', function(e){
Event.stop(e);
var t = $(this.href.match(/#(/w.+)/)[1]+'-tab');
_tabs.show(t);
_tabs.menu.without(t).each(_tabs.hide.bind(_tabs));
}.bindAsEventListener(a));
});
</script>
</body>
</html>
http://www.corange.cn//uploadfiles/tablekit1.2.2_79411.rar
原文地址:http://www.corange.cn/archives/2010/03/3542.html
