不多說直接上代碼
HTML部分
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description." />
<title>報銷列表</title>
<link href="../boostrap/bootstrap.css" rel="stylesheet" />
<script src="../dist/Model/jquery-2.1.4.js"></script>
<link href="../dist/Model/weui.min.css" rel="stylesheet" />
<link href="../dist/Model/jquery-weui.css" rel="stylesheet" />
<link href="../dist/Model/demos.css" rel="stylesheet" />
<link href="../ExceptionTalk/css/mui.min.css" rel="stylesheet" />
<script src="../ExceptionTalk/js/mui.min.js"></script>
<script src="../dist/Model/jquery-2.1.4.js"></script>
<script src="../dist/Model/fastclick.js"></script>
<script src="../dist/Model/jquery-weui.js"></script>
<script src="../js/MUI/PullToRefresh/mui.pullToRefresh.js"></script>
<script src="../js/MUI/PullToRefresh/mui.pullToRefresh.material.js"></script>
</head>
<body>
<div class="mui-content">
<div id="slider" class="mui-slider mui-fullscreen">
<div class="mui-slider-group">
<div id="item1mobile" class="md-f1 mui-slider-item mui-control-content detailInfos md-box md-ver mui-active">
<div id="scroll1" class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul id="CCJLUl" class="mui-table-view"></ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/MyCostList.js"></script>
</body>
</html>
JS部分
var uid = "";
mui.init({
swipeBack: false,
gestureConfig: {
tap: true//默認爲false
}
});
//加載報銷列表
function QueryOutCar() {
var temp = document.getElementById("CCJLUl");
var slength = temp.getElementsByTagName("li").length / 2;
var spg = Math.ceil(slength / 10);
var fragment = document.createDocumentFragment();
if (slength < spg * 10) {
isOver = true;
mui('#scroll1').pullRefresh().endPullupToRefresh(true);
$(".mui-pull-bottom-pocket").css("visibility", "visible");
} else {
var length = temp.getElementsByTagName("li").length / 2;
var Pg = Math.ceil(length / 10) + 1;//分頁
isOver = false;
mui('#scroll1').pullRefresh().endPullupToRefresh(false); //停止正在加載
mui('#scroll1').pullRefresh().enablePullupToRefresh(); //顯示上拉加載文字
$.ajax({
async: false, type: "get", url: "Handler.ashx?action=OtherFeeBaoList",
data: { Page: Pg, rows: 10, uid: uid }, dataType: "text",
success: function (res) {
res = JSON.parse(res);
for (var i = 0; i < res.length; i++) {
var li = document.createElement("li");
li.className = 'mui-table-view-cell';
li.id = res[i].uid + "_" + res[i].id;
if (res[i].returninuser != "") {
if (res[i].img != "") {
li.innerHTML = "<li id='" + res[i].uid + "_" + res[i].id + "' class='mui-table-view-cell' style='background-color: #C0CC33; margin-top: 5px; border-radius: 2px;' ><div class='mui-table'><div class='mui-table-cell mui-col-xs-12'><p class='mui-h5 mui-ellipsis' style='color: #000000;'>編號：" + res[i].uid + "  操作人：" + res[i].Inuser + "</p><p class='mui-h5 mui-ellipsis' style='color: #000000;'>金額：" + res[i].Money + " 狀態：已上傳發票</p><p class='mui-h5 mui-ellipsis' style='color: #000000;'>內容：" + res[i].NC + "</p><p class='mui-h5 mui-ellipsis' style='color: #000000;'>操作時間：" + res[i].Indate + "</p></div></div></li>";
li.addEventListener('tap', function (event) {
var oID = this.getAttribute("id");
location.href = "ClaimbackDetail.html?oID=" + oID + "&type=雜費報銷";
})
} else {
li.innerHTML = "<li id='" + res[i].uid + "_" + res[i].id + "' class='mui-table-view-cell' style='background-color: #00fB90; margin-top: 5px; border-radius: 2px;' ><div class='mui-table'><div class='mui-table-cell mui-col-xs-12'><p class='mui-h5 mui-ellipsis' style='color: #000000;'>編號：" + res[i].uid + "  操作人：" + res[i].Inuser + "</p><p class='mui-h5 mui-ellipsis' style='color: #000000;'>金額：" + res[i].Money + " 狀態：未上傳發票</p><p class='mui-h5 mui-ellipsis' style='color: #000000;'>內容：" + res[i].NC + "</p><p class='mui-h5 mui-ellipsis' style='color: #000000;'>操作時間：" + res[i].Indate + "</p></div></div></li>";
li.addEventListener('tap', function (event) {
var oID = this.getAttribute("id");
location.href = "ClaimbackDetail.html?oID=" + oID + "&type=雜費報銷";
})
}
}
fragment.appendChild(li);
}
}
});
temp.appendChild(fragment);
var atemp = document.getElementById("CCJLUl");
var alength = atemp.getElementsByTagName("li").length / 2;
var apg = Math.ceil(alength / 10);
if (alength < apg * 10) {
isOver = true;
mui('#scroll1').pullRefresh().endPullupToRefresh(true);
$(".mui-pull-bottom-pocket").css("visibility", "visible");
}
}
}
//獲取傳過來的參數
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return decodeURIComponent(r[2]);
}
return '';
}
mui('#scroll1').pullRefresh({
container: '#scroll1',
up: {
height: 50,
auto: false,
contentrefresh: "正在加載...",
contentnomore: "沒有更多數據了",
callback: userPullupRefresh
}
});
function userPullupRefresh() {
setTimeout(function () {
mui('#scroll1').pullRefresh().endPullupToRefresh((isOver)); //參數爲true代表沒有更多數據了。
QueryOutCar();
}, 1500);
}
(function ($) {
uid = getQueryString('uid');
QueryOutCar();
//阻尼係數
var deceleration = mui.os.ios ? 0.003 : 0.0009;
$('.mui-scroll-wrapper').scroll({
bounce: false,
indicators: true, //是否顯示滾動條
deceleration: deceleration
});
})(mui);
C# (handler.ashx.cs文件)
/// <summary>
/// 雜費報銷列表
/// </summary>
/// <param name="context"></param>
public void OtherFeeBaoList(HttpContext context)
{
int page = Convert.ToInt32(context.Request["Page"]);
int rows = Convert.ToInt32(context.Request["rows"]);
string uid = context.Request["uid"].ToString();
HttpCookie cookie = context.Request.Cookies["inopenid"];
string openId = "";
string url = MyConvert.MyUrlCode(context.Request.Url, encode);
if (url.IndexOf("http://localhost") > -1)
{
openId = "oH5RduKE74qVHzvyooJaV2EYhPFg";
}
else
{
openId = cookie.Value;//
}
string name = CommonClass.getName(openId);
//明細表 Tbl_OtherFeeBaoList
int index = rows * page;
List<Expense.Model.OtherFeeBaoList> lists = new List<Expense.Model.OtherFeeBaoList>();
if (name != "")
{
//string selSQL = "select top " + index + " id,uid,Money,NC,Inuser,Indate from Tbl_OtherFeeBaoList where uid ='" + uid + "' order by Indate desc ";
//string selSQL = "select * from (select row_number() over(order by t.Indate desc) as rn,t.id,t.uid,t.Money,t.NC,t.Inuser,t.Indate from Tbl_OtherFeeBaoList t where t.uid='" + uid + "') d where d.rn between " + (index-9) + " and " + index + "";
string selSQL = "select * from (select row_number() over(order by t.Indate desc) as rn,t.id,t.uid,t.Money,t.NC,t.Inuser,t.Indate,b.img from Tbl_OtherFeeBaoList as t left join Tbl_InvoicePic as b on t.id=b.pid where t.uid='" + uid + "') d where d.rn between " + (index - 9) + " and " + index + "";
DataTable dt = DBL.DbHelperSQL.QueryDataTable(0, selSQL);
foreach (DataRow idr in dt.Rows)
{
lists.Add(new Expense.Model.OtherFeeBaoList
{
id = Convert.ToInt32(idr["id"]),
uid = Convert.ToDecimal(idr["uid"]),
Money = Convert.ToDecimal(idr["Money"]),
NC = Convert.ToString(idr["NC"]),
Indate = Convert.ToString(idr["Indate"]),
Inuser = Convert.ToString(idr["Inuser"]),
img=Convert.ToString(idr["img"])
});
}
}
else
{
lists.Add(new Expense.Model.OtherFeeBaoList
{
});
}
JavaScriptSerializer js = new JavaScriptSerializer();
context.Response.Write(js.Serialize(lists));
}