题目
1、实现以上的表格。
2、“姓名”列超长时支持尾部打点”…”（css控制）。
3、整个表格固定宽度为500px，“生日”列固定宽度为120px，“操作”列固定宽度为200px，“姓名”列自动为剩下的。
4、除标题栏，支持鼠标拖动改变每一行的次序（jquery的sortable）。
5、“操作”列提供“上移”、“下移”操作。（要求第一行没有“上移”，最后一行没有“下移”）
6、“操作”列提供“删除”操作。
7、“操作”列提供“修改”操作，弹出框：
a)弹出此对话框（对话框不使用jquery的插件，而是写html实现）后，背景变灰且不能操作，可以拖动框的标题栏（仅标题栏可以拖动，使用jquery的draggable）。
b)框内的数据要初始化为原数据
c)姓名不能为空
d)对话框使用动态方式创建，即不是在页面中一开始就存在。
8、提供“添加行”的操作：
a)姓名不能为空
9、初始化页面时，不直接输出3行数据的html代码，改为通过javascript读取数组初始化行。例如初始数组为：[{“name”:”张三”, “birthday”:”2010.1.1”}, {“name”:”李四”, “birthday”:”2011.1.1”}]。
10、修改、删除或添加行数据时，同时将行里的数据同步更新到上面的JSON数组中。
11、搭建resin（版本3.x）。
12、在jsp页面中组装FaiList的初始化数据，在页面toJson成js的初始化数组，初始化表格。
13、初始化时，通过ajax方式从另一个jsp文件中获得初始化数据，初始化表格。
14、增加“保存”操作，弹出alert框，输出所有行的json数据（jquery的toJSON）。
15、“保存”时，通过ajax方式把数据提交到一个jsp文件，此jsp文件把数据读取后，转化为FaiList对象（使用FaiList.parseParamList），返回list的长度，原页面alert结果。
注：以上需求要测试多浏览器下的表现（chrome/firefox/ie6/ie8/ie9），jquery版本1.7.1。
所有input标签要encode输出内容。避免XSS攻击。测试输入：a&aa‘b”c
附加：
jquery： var
(this).parents(“tr”);
js原生
var tr=obj.parentNode.parentNode;
var tbody=tr.parentNode;
//数组转json串
var arr = [1,2,3, { a : 1 } ];
JSON.stringify( arr );
//json字符串转数组
var jsonStr = ‘[1,2,3,{“a”:1}]’;
JSON.parse( jsonStr );
1、index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<html>
<head>
</head>
<body>
<table border="1" id="sortable">
<thead>
<tr class="special" id="special">
<td width=130px class="table" >Name</td>
<td width=120px>Date</td>
<td width=250px>Operate <button class="add">Add</button> <button class="save">Save</button></td>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
<div id="bg" class="bg"></div>
<div id="dialog" class="dialog" >
<div>
<table width="100%" border="0">
<tr style="background: gray;">
<td width="200" height="30" id="title">Modify</td>
</tr>
</table>
</div>
<table width="100%" border="0">
<tr>
<td align="right" width="100" height="30">Name:</td>
<td><input type="text" name="name" id="nameId" size="30"/></td>
</tr>
<tr>
<td align="right" height="30">Date:</td>
<td><input type="text" id="dateId" size="30"/></td>
</tr>
<tr>
<td colspan="2" align="center">
<button class="ok">OK</button> <button class="cancel">Cancel</button>
</td>
</tr>
</table>
</div>
</div>
</body>
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jsTest.js"></script>
<link rel="stylesheet" href="css/cssTest.css" type="text/css"/>
</html>
2、cssTest.css
.special {
background: gray;
width: 500px;
}
.table {
/*position: fixed;*/
table-layout: fixed;
width: 180px;
}
.name {
/*display: inline-block;*/
width: 180px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
html,body {
margin:0;
height:100%;
}
.bg {
width:100%;
height:100%;
background-color:#000;
position:absolute;
top:0;
left:0;
z-index:2;
opacity:0.3;
/*兼容IE8及以下版本浏览器*/
filter: alpha(opacity=30);
display:none;
}
.dialog{
width:400px;
height:200px;
margin: auto;
position: absolute;
z-index:3;
top: 0;
bottom: 0;
left: 0;
right: 0;
display:none;
background:white;
}
3、jsTest.js
var dataArray= [];
$(function () {
ajaxInit();
function ajaxInit() {
$.ajax({
url:"jsp/jspSave.jsp",
type:"GET",
data:{
"option":1
},
success:function (data) {
console.log(data);
dataArray = JSON.parse(data);
console.log(dataArray);
console.log(dataArray.length);
for (var i = 0; i < dataArray.length; i++) {
var $table = $("#sortable");
var name = dataArray[i].name;
var date = dataArray[i].date;
var str = appendTr(name, date);
$table.append(str);
}
var $up = $(".up")
//下移
var $down = $(".down");
//ok
var $modify = $(".modify");
//删除
var $del = $(".del");
bindUp($up);
bindModify($modify);
bindDel($del);
bindDown($down);
btnOnOff();
}
});
}
var $tbody = $("#tbody");
$tbody.sortable({
items: "tr", //只是tr可以拖动
start:function (event,ui) {
btnOnOff();
}
});
$tbody.sortable({
items: "tr", //只是tr可以拖动
stop:function (event,ui) {
btnOnOff();
//
arraySave();
}
});
var $dialog = $("#dialog");
$dialog.draggable();
hide();
function arraySave() {
var $table = $("#sortable");
var $trs = $table.find("tr");
var arrayTemp=new Array();
for(var i=1;i<$trs.length;i++){
var json={};
json["name"]=$trs.eq(i).find(".name").html();
console.log(i+":"+$trs.eq(i).find(".name").html());
json["date"]=$trs.eq(i).find(".date").html();
console.log(i+":"+$trs.eq(i).find(".date").html());
arrayTemp.push(json);
}
dataArray=arrayTemp;
}
function show() {
$dialog.show();
}
function hide() {
$dialog.hide();
}
$tbody.disableSelection();
//初始化按钮
btnOnOff();
var $ok = $(".ok");
var inputName;
var title;
var $modifyTR;
function bindUp($obj) {
$obj.click(function () {
var $tr = $(this).parents("tr");
if ($tr.index() != 0) {
$tr.fadeOut().fadeIn();
$tr.prev().before($tr);
}
btnOnOff();
//根据位置改变数组
arraySave();
});
}
function bindDown($obj) {
$obj.click(function () {
var $tr = $(this).parents("tr");
$tr.fadeOut().fadeIn();
$tr.next().after($tr);
btnOnOff();
//根据位置改变数组
arraySave();
});
}
function bindDel($obj) {
$obj.click(function () {
var $tr = $(this).parents("tr");
var index;
for (var i = 0; i < dataArray.length; i++) {
if (dataArray[i].name == $tr.children("td")[0].innerHTML) {
index = i;
}
}
dataArray.splice(index, 1);
$tr.remove();
btnOnOff();
});
}
function bindModify($obj) {
$obj.click(function () {
//调用遮罩层
maskLayer();
$modifyTR = $(this).parents("tr");
//初始化input内容
$("#title").text("Modify");
title = "Modify";
$('#nameId').val($modifyTR.children("td")[0].innerHTML);
$('#dateId').val($modifyTR.children("td")[1].innerHTML);
inputName = $('#nameId').val();
show();
// document.getElementById("input").$tr = $(this).parents("");
});
}
function btnOnOff() {
var $table = $("#sortable");
var $trs = $table.find("tr");
if ($trs.length == 2) {
$trs.eq($trs.length-1).find(".up").hide();
$trs.eq($trs.length-1).find(".down").hide();
}
if($trs.length>2){
for(var i=1;i<$trs.length;i++){
if(i == 1){
$trs.eq(i).find(".up").hide();
$trs.eq(i).find(".down").show();
}
if(i!=1&&i!=$trs.length-1){
$trs.eq(i).find(".up").show();
$trs.eq(i).find(".down").show();
}
if(i==$trs.length-1){
$trs.eq(i).find(".up").show();
$trs.eq(i).find(".down").hide();
}
}
}
}
function appendTr(name, date) {
var array = new Array();
array.push('<tr>\n' +
' <td id="name" class="name" >' + name + '</td>\n' +
' <td id="date" class="date" style="width: 120px">' + date + '</td>\n' +
' <td style="width: 200px">\n' +
' <button class="up">Up</button>\n' +
' <button class="down">Down</button>\n' +
' <button class="del">Del</button>\n' +
' <button class="modify">Modify</button>\n' +
' </td>\n' +
' </tr>');
return array;
}
function isDate(str) {
//日期的正则表达式
var reg = /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/;
var regExp = new RegExp(reg);
if (!regExp.test(str) && str != "") {
alert("Date should be like 2014-01-01");
return false;
}
return true;
}
//打开遮罩层
function maskLayer() {
var s = document.getElementById("bg");
s.style.display = "block";
var l = document.getElementById("dialog");
l.style.display = "block";
}
//关掉遮罩层
function cancel_maskLayer() {
var s = document.getElementById("bg");
s.style.display = "none";
var l = document.getElementById("dialog");
l.style.display = "none";
}
//防xss注入
function safeStr(str){
return str.replace(/</g,'<').replace(/>/g,'>').replace(/"/g, """).replace(/'/g, "'");
}
$ok.click(function () {
var name = safeStr($('#nameId').val());
var date = safeStr($('#dateId').val());
if (title == "Modify") {
if (name == "") {
alert("Name can not be null");
}
if (isDate(date) || date == "") {
var $modifyChild = $modifyTR.children("td");
if (inputName == $modifyChild[0].innerHTML) {
$modifyChild[0].innerHTML = name;
$modifyChild[1].innerHTML = date;
for (var i = 0; i < dataArray.length; i++) {
if (dataArray[i].name == inputName) {
index = i;
}
}
var json={};
json["name"]=name;
json["date"]=date;
dataArray.splice(index, 1,json);
console.log("name::"+name);
console.log("date::"+date);
}
hide();
cancel_maskLayer();
}
}
if (title == "Add") {
if (name == "") {
alert("Name can not be null");
}
if (isDate(date) || date == "") {
if (name != "") {
var $table = $("#sortable");
var str = appendTr(name, date);
$table.append(str);
$trs = $table.find("tr");
bindUp($trs.eq($trs.length - 1).find(".up"));
bindDel($trs.eq($trs.length - 1).find(".del"));
bindModify($trs.eq($trs.length - 1).find(".modify"));
bindDown($trs.eq($trs.length - 1).find(".down"));
var json={};
json["name"]=name;
json["date"]=date;
dataArray.push(json);
console.log("name::"+name);
console.log("date::"+date);
hide();
cancel_maskLayer();
btnOnOff();
}
}
}
});
var $cancel = $(".cancel");
$cancel.click(function () {
hide();
cancel_maskLayer();
});
var $add = $(".add");
$add.click(function () {
maskLayer();
$("#title").text("Add");
title = "Add";
$('#nameId').val("");
$('#dateId').val("");
show();
//调用遮罩层
});
var $save = $(".save");
$save.click(function () {
var json=JSON.stringify(dataArray);
alert(json);
$.ajax({
url:"jsp/jspSave.jsp",
type:"GET",
dataType:"json",
data:{
"option":2,
"json":json
},
success:function (obj) {
alert(obj);
console.log("ll"+obj);
}
})
});
});4、jspSave.jsp
<%@page import="..."%>
<%@page import="..."%>
<%@page import="java.util.*"%>
<%!
public static class SingletonList{
private static List<Map> INSTANCE;
public static List<Map> getFaiList(){
if(INSTANCE == null){
INSTANCE = new FaiList<Param>();
}
return INSTANCE;
}
public static void set( List<Map> list){
INSTANCE=list;
}
}
%>
<%
request.setCharacterEncoding("utf-8");
String option = request.getParameter("option");
List<Map> list = SingletonList.getList();
int o=Integer.parseInt(option);
if(o==1){
if(list.size()==0){
Map map1 =new Map();
map1.setString("name","John");
map1.setString("date","2014-09-09");
list.add(map1);
Map map2 =new Map();
map2.setString("name","Jesper");
map2.setString("date","2032-08-09");
list.add(map2);
out.println(list.toJson());
}else{
out.println(list.toJson());
}
}else if(o==2){
String arrayJson = request.getParameter("json");
SingletonList.set(List.parseList(arrayJson));
out.println(SingletonList.getList().size());
}else{
out.println("error");
}
%>