PhoneGap Table示例

最新推荐文章于 2024-07-06 17:55:28 发布

peneraly_ruirui

最新推荐文章于 2024-07-06 17:55:28 发布

阅读量531

点赞数

分类专栏： phoneGap 文章标签： phonegap html5

本文链接：https://blog.csdn.net/peneraly_ruirui/article/details/48106991

版权

phoneGap 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

PhoneGap示例

表格增删查改Demo

创建程序

cordova create tableOperate com.peneraly.table TabelOperate

增加ios平台支持

cordova platform add ios

创建HTML文件

<!DOCTYPE html>

<html>

<head>

<title>Hello World</title>

</head>

<body>

<hr>

<h1 id="table-title">表格信息插入Demo</h1>

</header>

</button>

</button>

</div>

</table>

</body>

</body>

</html>

增加js文件

(function(){

// 操作表格数据

var TableData = function () {

var self = this;

this.datalist = [];

// 初始化，映射dom和js变量

this.init = function(params) {

this.tableid = params ? params.tableid || 'data-table' : 'data-table';

this.addbtnid = params ? params.addbtnid || 'add-info' : 'add-info';

this.delbtnid = params ? params.delbtnid || 'del-selected' : 'del-selected';

this.initTable();

this.initListener();

}

// 根据localStorage存储的内容，初始化列表

this.initTable = function () {

var datalist = JSON.parse(localStorage.getItem('todolist'));

for(var item in datalist) {

addRow(datalist[item]);

}

// 弹出添加对话框，调用添加信息函数

this.createRow = function () {

var rowInfo = {};

var inputInfo = prompt('please input the info:', '');

if (inputInfo !== null) {

if (inputInfo === '') {

alert('info cannot be null');

}

else {

rowInfo = {

'info': inputInfo,

'check': 0

};

addRow(rowInfo);

}

self.saveToDoList();

}

// 信息行选中/选出

this.checkboxClicked = function () {

var table = document.getElementById(self.tableid);

var len = table.rows.length;

for (var i = 0; i < len; i++) {

var row = table.rows[i];

var checktd = row.cells[0].childNodes[0];

var infotd = row.cells[1].childNodes[0];

if (checktd !== null && checktd.checked === true) {

if (infotd !== '') {

$(infotd).css({

'text-decoration': 'line-through'

});

}

else {

$(infotd).css({

'text-decoration': 'none'

});

}

self.saveToDoList();

}

// 利用localStorage存储当前数据状态

this.saveToDoList = function () {

var todoArray = {};

var table = $('#' + self.tableid)[0];

for(var i = 0, len = table.rows.length; i < len; i++) {

var row = table.rows[i];

var checked = row.cells[0].childNodes[0].checked;

var info = row.cells[1].childNodes[0];

todoArray['row' + i] = {

'check': checked ? '1' : '0',

'info': $(info).val()

};

}

// 存入localStorage

localStorage.setItem('todolist', JSON.stringify(todoArray));

}

// 查看信息

this.viewSelectedRow = function (e) {

var row = $(e).parent().parent();

var info = row.find('.info').val();

alert('本行信息： ' + info);

}

// 删除本行信息

this.deleteSelectedRow = function (e) {

var row = $(e).parent().parent();

row.remove();

self.saveToDoList();

}

// 事件监听

this.initListener = function () {

$('body').delegate('#' + self.addbtnid, 'click', function () {

self.createRow();

}).delegate('#' + self.delbtnid, 'click', function () {

self.removeCompletedTasks();

}).delegate('.check', 'click', function () {

self.checkboxClicked();

}).delegate('.view', 'click', function () {

self.viewSelectedRow(this);

}).delegate('.del', 'click', function () {

self.deleteSelectedRow(this);

}).delegate('.info', 'change', function () {

self.saveToDoList();

});

}

// 删除所有选中行

this.removeCompletedTasks = function () {

var table = document.getElementById(self.tableid);

var len = table.rows.length;

var dellist = [];

for (var i = 0; i < len; i++) {

var row = table.rows[i];

var checked = row.cells[0].childNodes[0].checked;

if (checked) {

table.deleteRow(i);

len--;

i--;

}

self.saveToDoList();

}

// 添加信息

function addRow(info) {

var html = ''

+ '<tr>'

+ '<td>'

+ '<input type="checkbox" class="check" value=' + info.check + '">'

+ '</td>'

+ '<td>'

+ '<input type="text" class="info" size="16" style="text-decoration: none;" value = "' + info.info + '">'

+ '</td>'

+ '<td>'

+ '<input type="button" class="view">'

+ '</td>'

+ '<td>'

+ '<input type="button" class="del">'

+ '</td>'

+ '</tr>';

$('#' + self.tableid).append($(html));

}

var mytable = new TableData();

mytable.init();

}())

添加CSS

在原Style.css中添加如下样式：

.addToDo {

background-color: Transparent;

border-color: Transparent;

}

.removeTasks {

background-color: Transparent;

border-color: Transparent;

}

.check {

background-color: Transparent;

width: 34px;

height: 32px;

}

.info {

background-color: grey;

}

.view {

background-color: Transparent;

width: 64px;

height: 32px;

}

.del {

background-color: Transparent;

width: 64px;

height: 32px;

}

#table-title{

color: #fff;

}

#button-line {

text-align: center;

margin-top: 20px;

}

运行

在电脑上安装phoneGap desktop
在手机上安装phoneGap
通过蓝牙进行连接

peneraly_ruirui

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
PhoneGap Table示例

PhoneGap示例表格增删查改Demo创建程序cordova create tableOperate com.peneraly.table TabelOperate增加ios平台支持cordova platform add ios创建HTML文件 Hello World
复制链接

扫一扫