使用json临时保存信息，并分页。复选框选中和为选择的功能及临时保存信息

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
<div>
<table border="1" id="table_grid">
<tr><td><input type="checkbox" onclick/></td><td>ID</td><td>Name</td></tr>
</table>
<div><a href="javascript:createGrid('pre')">pre</a>   <a href="javascript:createGrid('next')">next</a>    <a href="javascript:getList()">save</a></div>
</div>

<div id="div_update">
<table border="1" id="table_update">
<tr><td>ID</td><td>Name</td></tr>
</table>
<div><a href="javascript:createUpdateGrid('pre','1')">pre</a>    <a href="javascript:createUpdateGrid('next','1')">next</a>    <a href="">update</a></div>
</div>

</body>
</html>
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">

    var currentPage = 1; //当前页数

    var currentPageUpdate = 1;//update当前页数

    var objList = new Array(); //用于存放选中的复选框ID

    var updateObjList = new Array();//用于存放勾选框选中的对象

    //模拟数据源，第一页数据
    var source1 = [{ id: 1, name: "beny" }, { id: 2, name: "beny" }, { id: 3, name: "beny" }, { id: 4, name: "beny" }, { id: 5, name: "beny"}];

    //模拟数据源，第二页数据
    var source2 = [{ id: 6, name: "ben" }, { id: 7, name: "ben" }, { id: 8, name: "ben" }, { id: 9, name: "ben" }, { id: 10, name: "ben"}];

    //模拟数据源update，第一页数据
    var sourceUpdate1 = [{ id: 1, name: "aa1" }, { id: 2, name: "aa2" }, { id: 3, name: "aa3" }, { id: 4, name: "aa4" }, { id: 5, name: "aa5"}];

    //模拟数据源update，第二页数据
    var sourceUpdate2 = [{ id: 6, name: "bb" }, { id: 7, name: "bb" }, { id: 8, name: "bb" }, { id: 9, name: "bb" }, { id: 10, name: "bb"}];

    createGrid("pre");//首次创建表格

    //创建表格
    function createGrid(page) {
        delRow("table_grid");
        var source;
        if (page == "pre") {//模拟分页1
            source = source1;
            currentPage = 1;
        }
        else {//模拟分页2
            source = source2
            currentPage = 2; ;
        }
        var table = document.getElementById("table_grid");
        for (var i = 0; i < source.length; i++) {
            var tr = table.insertRow();

            var tdCkb = tr.insertCell();
            tdCkb.innerHTML = "<input type='checkbox' name='ckb' id='" + source[i].id + "' onclick=ckbOnClickEvent(this.id,'"+source[i].name+"') />";//加入点击事件

            var tdId = tr.insertCell();
            tdId.innerText = source[i].id;

            var tdName = tr.insertCell();
            tdName.innerText = source[i].name;

        }
        if (objList.length>0) {//判断是否第一次加载表格
            $("input[name='ckb']").each(function () {
                for (var i = 0; i < objList.length; i++) {
                    if (objList[i].currentPage == currentPage && objList[i].id == $(this).attr("id")) {//通过当前页码和复选框ID对比
                        $(this).attr("checked", true);//为复选框打勾
                    }
                }
            });
        }
    }

    //复选框点击事件
    function ckbOnClickEvent(ckbId,name) {
        getAllCkbValue(ckbId,name);

    }

    //获取所有复选框
    function getAllCkbValue(ckbId,name) {
        if ($("#" + ckbId).attr("checked") == true) {//如果选中的复选框是勾上的，就把当前页码和复选框的ID保存在JSON
            var obj = "{currentPage:" + currentPage + "," + "id:" + ckbId + ",name:'"+name+"'}";//把当前页码和复选框ID保存为JSON对象
            obj = eval("(" + obj + ")");
            objList.push(obj); //放进集合
        }
        else {//如果选中的复选框不是勾上的，就在集合对比，并删除
            for (var i = 0; i < objList.length; i++) {
                if (objList[i].id == $("#" + ckbId).attr("id")) {
                    objList.splice(i, 1); //删除集合的第i个
                }
            }
        }
    }

    //获取集合
    function getList() {
        for (var i = 0; i < objList.length; i++) {
   objList[i].name = 'monadan';
   alert(objList[i].id +","+objList[i].name+","+tr.rowIndex);
        }

    }

    //删除表格行
    function delRow(tableId) {
        var table = document.getElementById(tableId);
        var tr = table.getElementsByTagName("tr");
        for (var i = tr.length - 1; i > 0; i--) {
            table.deleteRow(i);
        }
    }

    //======================update======================


     //var currentPageUpdate = 1;//update当前页数
var totalPage = 0;
var pageCount = 2;
var allList = new Array();
var isFirst = "";
onload();
function onload(){
allList.length = 5;
sourceUpdate1.length
//alert("currentPage1:"+currentPage1);
createUpdateGrid('first',isFirst); //创建update信息表格
}

    //创建update信息表格,两个参数，分页参数和是否是第一次创建表格
    function createUpdateGrid(page,isFirst,source) {
if(page == "pre"){
   if(currentPage != "1" ){
    currentPage = parseInt(currentPage) - 1;
   }

}else if(page == "next"){
   if(currentPage >= 1){
    currentPage = parseInt(currentPage) + 1;
   }
}
var num = (currentPage - 1) * pageCount;
var numpage = currentPage * pageCount;

//把得到的值放到一个新的list里面。
            source = sourceUpdate1;
   isFirst = 1;
//取到新修改的信息
   saveDate();

        delRow("table_update");
        var table = document.getElementById("table_update");
for(var i = num ; i < numpage; i++){
   if(typeof(source[i]) != 'undefined' ){
    var tr = table.insertRow();
    var tdId = tr.insertCell();
    tdId.innerText = source[i].id;
    var tdName = tr.insertCell();
    tdName.innerHTML = "<input name='text_update' type='text' value=" + source[i].name + " id="+source[i].id+" />";
   }
        }

        if (page != "first") {//如果是点击了分页按钮
            if (updateObjList.length > 0) {
                $("input[name='text_update']").each(function () {
                    for (var i = 0; i < updateObjList.length; i++) {
                        if ($(this).attr("id") == updateObjList[i].id) {
                            $(this).attr("value", updateObjList[i].name);
                        }
                    }
                });
            }
        }
    }
    //保存当页数据
    function saveDate() {
        var valList = new Array();
        $("input[name='text_update']").each(function () {
alert("--ssss--:"+$(this).attr("id")+"-"+$(this).attr("value"));
            valList.push($(this).attr("id")+"-"+$(this).attr("value"));//获取当前页的所有name文本框value,并保存在集合
        })

        for (var i = 0; i < valList.length; i++) {
            var obj = "{currentPage:" + currentPage + "," + "id:" + valList[i].split("-")[0] + ",name:'" + valList[i].split("-")[1] + "'}"; //把当前页码和修改的信息保存为JSON对象
            obj = eval("(" + obj + ")");
            updateObjList.push(obj); //放进集合
        }
    }

</script>

使用json临时保存信息，并分页。复选框选中和为选择的功能及临时保存信息

猜你喜欢