1.话不多说上代码：product-list.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery/jquery-3.2.0.min.js"></script>
<style>
tr,td{
border: 1px solid #9CF
}
td{
width:50px;
}
</style>
</head>
<body>
<table style="border: 1px solid #9CF" align="center" id="dataTable">
<tr>
<td>类名</td>
<td >1</td>
<td>类型</td>
<td id="classtype" style="width: 150px;" name="classtype">任意该类型的值</td>
<td>值</td>
<td >3</td>
<td><input type="button" id="delete" οnclick="deleteRow(this)" value="删除" /></td>
<td><input type="button" id="edit" class="edit" value="编辑" /></td>
</tr>
</table>
<input type="button" name="tb" id="tb" value="添加一行" />
<input type="button" name="getData" id="getData" οnclick="GetInfoFromTable();" value="获取表格数据" />
<input type="button" name="getSelectData" id="getSelectData" οnclick="GetSelect();" value="获取select" />
<script>
$('#test1').bind('input propertychange', function() {
var text = $('#test1').val();
document.getElementById("test").value = text;
});
$('#btnSet').click(function(){
var text = $('#test1').val();
document.getElementById("test").value = text;
});
function GetSelect(){
alert($("#typeSelect").val());
}
</script>
<script>
$('#tb').click(function(){
var innerTD = "<tr><td>类名</td><td>name1</td><td>类型</td><td>int</td><td>值</td><td>2</td><td><input type='button' id='delete' οnclick='deleteRow(this)' value='删除' /></td><td><input type='button' id='edit' class='edit' value='编辑' /></td></tr>";
$("#dataTable").append(innerTD);
$("#dataTable").on("click", ".edit", function(){});
});
function deleteRow(r){
var i=r.parentNode.parentNode.rowIndex;
document.getElementById('dataTable').deleteRow(i);
}
$("body").on('click',"[class='edit']",function(){
str = $(this).val()=="编辑"?"确定":"编辑";
$(this).val(str); // 按钮被点击后，在“编辑”和“确定”之间切换
var i = 0;
$(this).parent().siblings("td").each(function() { // 获取当前行的其他单元格
obj_text = $(this).find("input:text"); // 判断单元格下是否有文本框
obj_btn = $(this).find("input:button"); // 判断单元格下是否有按钮
obj_select = $(this).find("select"); // 判断单元格下是否有select
if(!obj_text.length && !obj_btn.length && !obj_select.length){ // 如果没有文本框，则添加文本框使之可以编辑
if(i==1 || i==5){
$(this).html("<input type='text' value='"+$(this).text()+"'>");
}
if(i==3){
var t = $(this).text().trim();
var st = "<select id='typeSelect' name='typeSelect'>";
if(t == "任意该类型的值"){
st = st + "<option value='0' selected>任意该类型的值</option><option value='1'>基本类型</option>";
}
else{
st = st + "<option value='0'>任意该类型的值</option><option value='1' selected>基本类型</option>";
}
st = st + "</select>"
$(this).html(st);
}
}
else{
if(i==1 || i==5){
$(this).html(obj_text.val()); // 如果已经存在文本框，则将其显示为文本框修改的值
}
if(i==3){
$(this).html($("#typeSelect").find("option:selected").text());
}
}
i++;
});
});
function GetInfoFromTable() {
var tableInfo = "[";
var tableObj = document.getElementById("dataTable");
for (var i = 0; i < tableObj.rows.length; i++) { //遍历Table的所有Row
tableInfo += "{"
for (var j = 0; j < tableObj.rows[i].cells.length; j++) { //遍历Row中的每一列
if(j%2==0){ //key
if(tableObj.rows[i].cells[j].innerText == ""){
break;
}
else{
if(j==0){
tableInfo += "\"className\":";
}
if(j==2){
tableInfo += "\"type\":";
}
if(j==4){
tableInfo += "\"value\":";
}
}
}
else{ //value
if(j==3){
if(tableObj.rows[i].cells[j].innerText.trim() == "任意该类型的值"){
tableInfo += parseInt("0") + ",";
}
if(tableObj.rows[i].cells[j].innerText.trim() == "基本类型"){
tableInfo += parseInt("1") + ",";
}
}
else{
tableInfo += "\"" + tableObj.rows[i].cells[j].innerText + "\",";
}
}
}
tableInfo += "},";
}
tableInfo = tableInfo + "]";
alert(tableInfo.replace(/\,}/g,"}").replace(/\,]/g,"]"));
//return tableInfo.replace(/\,}/g,"}").replace(/\,]/g,"]");
}
</script>
</body>
</html>
//定义全局map
var map = new Map();
map.set("03002", "北京");
map.set("03003", "上海");
map.set("03004", "广州");
map.set("03005", "深圳");
map.set("03006", "深圳");
/**
* 查询
* @param {Object} pageNo 当前页码
*/
function toSearch(pageNo) {
if(typeof(pageNo) == "undefined") {
pageNo = 1;
}
$('#productList').empty();
var startDate=$("#dpd1").val();
var endDate=$("#dpd2").val();
var scenicName=$("#scenic").val();
var totalNum;
var pageSize = 15;
var cql=getCQL('01',startDate,endDate,scenicName,pageSize,pageNo);
console.log("查询记录条数的【cql】："+cql);
AV.Query.doCloudQuery(cql).then(function(data) {
console.log(data);
var bean = new Page();
bean.setPageNo(pageNo); //设置当前页
bean.setTotalSize(data.count); //设置总页数
bean.setPageSize(pageSize); //设置每页显示的条数
bean.setPageDiv("pageDiv"); //设置展示分页控件的容器
bean.setFn("toSearch"); //点击按钮的回调函数
bean.doStartPage();
}, function(error) {
console.log(error);
});
cql=getCQL('02',startDate,endDate,scenicName,pageSize,pageNo);
console.log("查询数据的【cql】："+cql);
AV.Query.doCloudQuery(cql).then(function(data) {
var productList=generalTr(data);
console.log("表格拼装HTML："+productList);
$('#productList').append(productList);
}, function(error) {
console.log(error);
});
};
/**
* 通过城市代码获取城市名称
* @param {Object} code
*/
function getScenicNameByCode(code) {
var value = map.get(code);
if(typeof(value) != "undefined") {
return value;
} else {
return code;
}
}
function getNumber(num) {
if(num == "100") {
return 1;
} else if(num == "-100") {
return -1;
} else {
return num;
}
}
function getReason(reason) {
if(reason == null) {
return "无";
} else {
return reason;
}
}
/**
* 生成select 的 option
*/
$(function() {
$("#scenic").prepend("<option value=''>所有城市</option>");
var filterMap = new Map();
map.forEach(function(value, key) {
var isContainsValue = (null == filterMap.get(value) || "" == filterMap.get(value)) ? true : false;
if(isContainsValue) {
filterMap.set(value, value);
$("#scenic").append("<option value='" + value + "'>" + value + "</option>");
}
});
});
/**
* 通过value 取 keyList
* @param {Object} value
*/
function getKeySet(value) {
var set = new Set();
map.forEach(function(val, key) {
if(value == val) {
set.add(key);
}
});
return set;
}
/**
*
* @param {Object} businessType 业务类型：01-查询总条数，02-查询数据
* @param {Object} startDate
* @param {Object} endDate
* @param {Object} scenicName
* @param {Object} pageSize
* @param {Object} pageNo
*/
function getCQL(businessType,startDate,endDate,scenicName,pageSize,pageNo){
var start;
if(businessType=='01'){
//count 不支持 distinct 等语法。仅限 count(*) 和 count(objectId)。
start='select count(objectId) from city ';
}else{
start='select * from city ';
}
var where='where objectId is exists ';
if(null!=scenicName&&""!=scenicName){
var scenicKeys=getKeySet(scenicName);
where+='and user in (';
var i=0;
scenicKeys.forEach(function(key){
if(i==0){
where+='"'+key+'"';
}else{
where+=',"'+key+'"';
}
i++;
});
where+=') ';
}
//内置函数 date() 接收的日期格式必须是 `` 的 UTC 时间。
if(null!=startDate&&""!=startDate){
where+='and createdAt>=date("'+startDate+'T00:00:00.000Z") ';
}
if(null!=endDate&&""!=endDate){
where+='and createdAt<=date("'+endDate+'T00:00:00.000Z") ';
}
if(businessType=='01'){
return start+=where;
}else{
//普通查询一样，limit 默认为 100，最大 1000
var startLine=(pageNo - 1) * pageSize;
return start+=where+'limit '+startLine+','+pageSize;
}
}
/**
* 通过返回的数据拼装 Tr
* @param {Object} data
*/
function generalTr(data){
var productList = "";
var products=data.results;
products.forEach(function(leaseRec) {
var productTitle = leaseRec.get('user');
var productprice = leaseRec.get('discountRate');
var productRemark = leaseRec.get('remark');
var releaseTime = (leaseRec.createdAt.getMonth() + 1) + '/' + leaseRec.createdAt.getDate() + '/' + leaseRec.createdAt.getFullYear();
var product = "<tr><td>" + getScenicNameByCode(productTitle) + "</td><td>" + getReason(productRemark) + "</td><td>" + getNumber(productprice) + "</td><td>" + releaseTime + "</td></tr>";
productList = productList + product;
});
return productList
}
3.附上项目demo下载地址：http://download.csdn.net/detail/after95/9801032
3951
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
