<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Jquerytable.aspx.cs" Inherits="WebApplication2.Jquerytable" %>
<!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 id="Head1" runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<%--<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>--%>
<script type="text/javascript">
$(function () {
var options = {
"title": "Student List", //表名称
"width": 600,
"fields": [ //表头
{"head": "", "type": "radio", "w": 40 }, //type可以为checkbox,radio,none 其中none表示没有单选也没有复选 w表示列的宽度
{"head": "用户编号", "dataname": "StudentId", "key": "true", "w": 100, "enable": "false" }, //key表示主键 enable是否显示
{"head": "姓名", "dataname": "Name" },
{ "head": "年龄", "dataname": "Age", "editor": "false" }, //editor是否允许编辑
{"head": "删除", "type": "delete", "w": 38, "enable": "true" },
{ "head": "编辑", "type": "editor", "w": 38, "enable": "true" },
{ "head": "查看", "type": "view", "w": 38, "enable": "true" }
],
"actions":
{
listAction: '/Demo/StudentList', //刷新
deleteAction: '/Demo/DeleteStudent', //删除
updateAction: '/Demo/UpdateStudent', //编辑
createAction: '/Demo/CreateStudent', //新增
selectAction: '/Demo/SelectStudent', //查询
viewAction: '/Demo/ViewStudent'//查看
}
};
var obj = $("#JQtabel"); //最外层div
var t_header = $("#t_header");
var t_content = $("#t_content"); //表
var searchtxt = $("#s_t_p");
var search_bt = $("#s_p");
var t_page = $("#t_page");
obj.width = obj.width(options.width);
t_header.width = t_header.width(options.width);
var t_w = (options.width - ($("#title").width() + $("#s_t_p").width() + $("#s_p").width())) * 2 / 3;
var s_w = (options.width - ($("#title").width() + $("#s_t_p").width() + $("#s_p").width())) * 2 / 3;
searchtxt.css({ "position": "relative", "top": "1px", "left": t_w });
search_bt.css({ "position": "relative", "top": "3px", "left": s_w });
t_page.width = t_page.width(options.width);
//模拟数据
var data =
{
"totalcount": 55,
"datas": [
{ "StudentId": 1, "Name": "a", "Age": 22 },
{ "StudentId": 2, "Name": "b", "Age": 23 },
{ "StudentId": 3, "Name": "c", "Age": 24 },
{ "StudentId": 4, "Name": "d", "Age": 25 },
{ "StudentId": 5, "Name": "e", "Age": 26 },
{ "StudentId": 6, "Name": "f", "Age": 27 },
{ "StudentId": 7, "Name": "g", "Age": 28 },
{ "StudentId": 8, "Name": "h", "Age": 29 },
{ "StudentId": 9, "Name": "i", "Age": 30 },
{ "StudentId": 10, "Name": "j", "Age": 31 }
]
}
//获得数据
var table = "<table id='tbResources' cellspacing='0' width='" + options.width + "'>";
var tr_h = "<tr id='tableTitle' align='center' style='height:30px;'>";
var td_h = "";
for (var i = 0; i < options.fields.length; i++) {
//是否有复选或单选
if (i == 0) {
if (options.fields[0].type == "checkbox") {
td_h = td_h + "<td style='" + options.fields[i].w + "px'><input id='checkall' type='checkbox'/></td>"
continue;
}
if (options.fields[0].type == "radio") {
td_h = td_h + "<td style='" + options.fields[i].w + "px'></td>"
continue;
}
if (options.fields[0].type == "none") {
td_h = "";
continue;
}
}
//要显示的表头
if (options.fields[i].enable != "false" || options.fields[i].enable == undefined || options.fields[i].enable == "true") {
if (options.fields[i].w != undefined) {
td_h = td_h + "<td style='" + options.fields[i].w + "px'>" + options.fields[i].head + "</td>"
} else {
td_h = td_h + "<td >" + options.fields[i].head + "</td>"
}
} else {
if (options.fields[i].key == "true" && options.fields[i].key != undefined) {//如果为主键列
if (options.fields[i].w != undefined) {
td_h = td_h + "<td style='" + options.fields[i].w + "px;display:none;'>" + options.fields[i].head + "</td>"
} else {
td_h = td_h + "<td style='display:none;' >" + options.fields[i].head + "</td>"
}
}
}
};
tr_h = tr_h + td_h + "</tr>";
table = table + tr_h;
var tr_c = "";
var td_c = "";
//如果没有数据
if (data.totalcount == undefined || data.datas == undefined) {
table = table + "</table>";
t_content.append(table);
$("#nodata").show();
}
else {
var keyname;
for (var g = 0; g < options.fields.length; g++) {
if (options.fields[g].key == "true") {
keyname = options.fields[g].dataname;
}
}
for (var k = 0; k < data.datas.length; k++) {
var o = "<tr id='" + data.datas[k][keyname] + "' align='center' style='height:30px;'>";
if (options.fields[0].type == "checkbox") {
td_c = "<td ><input name='subbox' value='" + data.datas[k][keyname] + "' type='checkbox'/></td>"
}
if (options.fields[0].type == "radio") {
td_c = "<td ><input name='radio' value='" + data.datas[k][keyname] + "' type='radio' /></td>"
}
if (options.fields[0].type == "none") {
td_c = "";
}
//获取
var h = 0;
for (var j = 1; j < options.fields.length; j++) {
if (options.fields[j].enable != "false" || options.fields[j].enable == undefined || options.fields[j].enable == "true") {
if (options.fields[j].dataname != undefined) {
h = j;
var dataname = options.fields[j].dataname;
td_c = td_c + "<td >" + data.datas[k][dataname] + "</td>";
}
} else {
if (options.fields[j].key == "true") {
var dataname = options.fields[j].dataname;
td_c = td_c + "<td style='display:none;' >" + data.datas[k][dataname] + "</td>";
}
}
}
for (var n = h + 1; n < options.fields.length; n++) {
if (options.fields[n].type == "delete") {
if (options.fields[n].enable != "false" || options.fields[n].enable == "true") {
td_c = td_c + "<td style='border:none;' ><img id='delete' type='delete' src='images/delete.png' style='cursor:pointer;' /></td>";
}
}
if (options.fields[n].type == "editor") {
if (options.fields[n].enable != "false" || options.fields[n].enable == "true") {
td_c = td_c + "<td style='border:none;'><img id='editor' type='editor' src='images/editor.png' style='cursor:pointer;' /></td>"
}
}
if (options.fields[n].type == "view") {
if (options.fields[n].enable != "false" || options.fields[n].enable == "true") {
td_c = td_c + "<td style='border:none;'><img id='view' type='view' src='images/view.png' style='cursor:pointer;' /></td>";
}
}
}
tr_c = tr_c + o + td_c + "</tr>";
}
table = table + tr_c + "</table>";
t_content.append(table);
}
//分页
//表头着色
var color = ["#f19b38", "#f8ba17", "#95ac26", "#569e32", "#69BDD0", "#9DA7C3", "#EB5C1E"];
$("#tableTitle").each(function () {
$(this).children().each(function (i) {
$(this).css("background-color", color[i]);
});
});
// /*-------------------------------td着色-----------------------------------*/
$("#tbResources").find("tr").not($("#tableTitle")).each(function (i) {
if (i % 2 == 0) {
$(this).css("background-color", "#f6f6f6").children().each(function (j) {
if (j % 2 == 1) {
$(this).css("background-color", "#eeeeee");
}
});
}
});
/*-------------------------------td着色-----------------------------------*/
//查询
$("#search").click(function () {
var name = $("#searchtxt").val();
$.ajax({
type: "post",
contentType: "application/json;utf-8",
datatype: "json",
url: "data.aspx/GetUser",
data: "{'name':" + name + "}",
success: function (data) {
//to do
},
error: function (err) {
//to do
}
});
});
//复选框
if (options.fields[0].type == "checkbox") {
$("#checkall").click(function () {
$('input[name="subbox"]').attr("checked", this.checked);
var $subBox = $("input[name='subbox']");
$subBox.click(function () {
$("#checkall").attr("checked", $subBox.length == $("input[name='subbox']:checked").length ? true : false);
});
});
}
//单选
//删除
$("#tbResources").find("img").each(function () {
var obj = $(this);
obj.click(function () {
if (obj.attr("type") == "delete") {
ShowDiv('DeleteDiv', 'fade');
var id = obj.parent().parent().attr("id");
// alert(id);
}
if (obj.attr("type") == "editor") {
ShowDiv('MyDiv', 'fade');
var id = obj.parent().parent().attr("id");
//alert(id);
}
if (obj.attr("type") == "view") {
ShowDiv('MyDiv', 'fade');
var id = obj.parent().parent().attr("id");
//alert(id);
}
});
});
//编辑
//新增
//刷新
//选择
$("#ok").click(function () {
var str_id = "";
if (options.fields[0].type == "checkbox") {
if ($("#checkall").attr("checked")) {
$("input[name='subbox']").each(function () {
str_id += $(this).val() + ",";
});
} else {
$("input[name='subbox']").each(function () {
if ($(this).attr("checked")) {
str_id += $(this).val() + ",";
}
});
}
alert(str_id);
}
if (options.fields[0].type == "radio") {
$("input[name='radio']").each(function () {
if ($(this).attr("checked")) {
str_id += $(this).val();
}
});
alert(str_id);
}
});
});
</script>
<style type="text/css">
.black_overlay
{
display: none;
position: absolute;
top: 0;
left: 0;
100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.5;
opacity: 0.5;
filter: alpha(opacity=50);
-khtml-opacity: 0.5;
}
.white_content
{
display: none;
position: fixed;
top: 13%;
left: 25%;
43%;
height: 40%;
background-color: white;
z-index: 1003;
border:4px solid lightblue;
-moz-border-radius:15px;
-webkit-border-radius:15px;
overflow: auto;
}
.divb
{
height:30px;
30px;
position:absolute;
z-index:1004;
margin-left:516px;
margin-top:-12px;
border:solid 1px black;
-moz-border-radius:15px;
-webkit-border-radius:15px;
background-color:#ffffff;
line-height:40px;
text-align:center;
font-weight:bold;
cursor:pointer;
font-size:18px;
padding-top:0px;
}
.deleteDiv
{
display: none;
position: fixed;
top: 23%;
left: 45%;
200px;
height: 100px;
background-color: white;
z-index: 1005;
border:4px solid lightblue;
-moz-border-radius:15px;
-webkit-border-radius:15px;
overflow: auto;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="JQtabel" style="border: red solid 1px; position:relative; top:100px; left:300px;">
<div id="t_header" style="background-color: #DC09BD; height: 40px;">
<span id="title" style="margin-left: 7px; font-size: 26px; position: relative; top: 6px;
left: 0px;">用户信息</span>
<span id="s_t_p" >
<input type="text" id="searchtxt" style="border: 1px solid; 120px; height: 22px;" />
</span>
<span id="s_p">
<input type="button" id="search" style=" 36px; height: 32px; background-color: #DC09BD;
background-image: url('images/search.png'); background-repeat: no-repeat; cursor: pointer;
border: 0px solid;" />
</span>
</div>
<div id="t_content">
</div>
<div id="nodata" style="display: none; height: 100px;">
<span style="position: relative; top: 45px; left: 160px; color: Red;">没有数据!</span></div>
<div id="t_page" style="height: 30px; border: blue solid 1px; background-color: #FCEFCF;">
<span style=" 24px; height: 24px; position: relative; top: 3px; left: 10px;">
<img id="refresh" alt="刷新" src="images/refresh.png" style="cursor: pointer;" />
</span>
<span style=" 24px; height: 24px; position: relative; top: 0px; left: 26px;">
<input id="ok" type="button" value="确定" />
</span>
</div>
</div>
<!--弹出层时背景层DIV-->
<div id="fade" class="black_overlay">
</div>
<div class="white_content" id="MyDiv">
<div class="divb" onclick="CloseDiv('MyDiv','fade')">
×
</div>
</div>
<div id="DeleteDiv" class="deleteDiv">
<span style="margin-left:10px; margin-top:10px;">确定要删除吗？</span>
<div>
<span><input type="button" value="确定" id="sure" /></span>
<span><input type="button" value="取消" id="cancle" onclick="CloseDiv('DeleteDiv','fade')" /></span>
</div>
</div>
</form>
</body>
</html>
<script type="text/javascript">
//弹出遮罩层
// //判断窗体是否最大化
// if (window.screen) {//判断浏览器是否支持window.screen判断浏览器是否支持screen
// var myw = screen.availWidth; //定义一个myw，接受到当前全屏的宽
// var myh = screen.availHeight; //定义一个myw，接受到当前全屏的高
// window.moveTo(0, 0); //把window放在左上脚
// window.resizeTo(myw, myh); //把当前窗体的长宽跳转为myw和myh
// }
//弹出隐藏层
function ShowDiv(show_div, bg_div) {
document.getElementById(show_div).style.display = 'block';
document.getElementById(bg_div).style.display = 'block';
var bgdiv = document.getElementById(bg_div);
bgdiv.style.width = document.body.clientWidth;
$("#" + bg_div).height($(document).height());
};
//关闭弹出层
function CloseDiv(show_div, bg_div) {
document.getElementById(show_div).style.display = 'none';
document.getElementById(bg_div).style.display = 'none';
};
//窗口大小改变时
$(window).resize(function () {
if (!$('#MyDiv').is(':hidden'))
popup();
});
//重新设置遮罩层的高和宽
function popup() {
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//var maskWidth = document.body.clientWidth; ;
$('#fade').css({ height: maskHeight, maskWidth }).show();
}
</script>