asp.net使用easyUI 前後臺數據交互
// 1. asp頁面使用EasyUI框架需要的Css樣式和JS
<script src="../script/jquery-easyui-1.4.5/jquery.min.js" type="text/javascript" charset = "utf-8"></script>
<script src="../script/jquery-easyui-1.4.5/jquery.easyui.min.js" type="text/javascript" charset = "utf-8"></script>
<link href="../script/jquery-easyui-1.4.5/themes/default/easyui.css" rel="stylesheet" type="text/css"/>
<link href="../script/jquery-easyui-1.4.5/themes/icon.css" rel="stylesheet" type="text/css"/>
<script src="../script/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js" type="text/javascript" charset = "utf-8" ></script>
<script type="text/javascript">
//=========================================================== 用戶列表信息 =============================================================================
// 加載頁面信息
$(function () {
$(‘#datagrid_line‘).datagrid({
pagination: true, //分頁控件
loadMsg: "正在加載，請稍後……",
toolbar: [{
text: ‘添加‘,
iconCls: ‘icon-add‘,
handler: function () { add(); }
}, ‘-‘, {
text: ‘刪除‘,
iconCls: ‘icon-remove‘,
handler: function () { remove(); }
}, ‘-‘, {
text: ‘編輯‘,
iconCls: ‘icon-edit‘,
handler: function () { edit(); }
}, ‘-‘, {
text: ‘刷新‘,
iconCls: ‘icon-reload‘,
handler: function () { refresh(); }
}]
});
$(‘#addDialog‘).dialog(‘close‘); // 頁面加載時隱藏dialog
$.ajax({
type: "post", //要用post方式
url: "Test.aspx/GetUserList", //方法所在頁面和方法名
data: {},
contentType: "application/json; charset=utf-8", // 從服務器獲取得到json格式數據
dataType: "json",
success: function (data) {
// alert(data.d); //返回的數據用data.d獲取內容
var json = JSON.parse(data.d); // 將後臺得到json格式的字符串轉換為字符串
for (var i in json.rows) {
var row_data = {
‘userId‘: json.rows[i].UserId,
‘userName‘: json.rows[i].UserName,
‘nickName‘: json.rows[i].NickName,
‘department‘: json.rows[i].Department,
‘phone‘: json.rows[i].Phone
};
$(‘#datagrid_line‘).datagrid(‘appendRow‘, row_data);
// $(‘#datagrid_line‘).datagrid(‘loadData‘, row_data); // 如果是loadData，loadData只是加載數據，
// 一條一條的加載,這樣就會覆蓋之前顯示的數據，而appendRow是追加數據，不會覆蓋之前顯示的數據
}
$(‘#datagrid_line‘).datagrid(‘reload‘);
//設置分頁控件
var p = $(‘#datagrid_line‘).datagrid(‘getPager‘);
$(p).pagination({
pageNumber: 1, //默認顯示第幾頁
pageSize: 10,
pageList: [10, 20, 30, 40, 50],
beforePageText: ‘第‘,
afterPageText: ‘頁 共{pages}頁‘,
displayMsg: ‘當前顯示{from}-{to}條記錄 共{total}條記錄‘
});
},
error: function (err) {
$.messager.alert("提示", "加載數據失敗！", "info");
}
});
});
// 添加操作
function add()
{
// 清空表單內容
$(‘#form1‘).form(‘clear‘);
$(‘#addDialog‘).dialog(‘open‘).dialog(‘setTitle‘, ‘添加用戶‘);
document.getElementById("Oper").value = "add";
}
// 編輯操作
function edit() {
//alert(‘edit‘);
var row = $(‘#datagrid_line‘).datagrid(‘getSelected‘);
if (row == null) {
$.messager.alert("提示", "請選擇要修改的行！", "info");
}
//獲取要修改的字段
$(‘#userNameId‘).textbox(‘setText‘, row.userName);
$(‘#nickNameId‘).textbox(‘setText‘, row.nickName);
$(‘#departmentId‘).textbox(‘setText‘, row.department);
$(‘#phoneId‘).textbox(‘setText‘,row.phone);
$(‘#addDialog‘).dialog(‘open‘).dialog(‘setTitle‘, ‘修改用戶信息‘);
document.getElementById("Oper").value = "modify";
document.getElementById("ID").value = row.userId;
$(‘#form1‘).form(‘load‘, row);
}
// 獲取添加信息並傳至後臺
function getVlaue()
{
var userName = $(‘#userNameId‘).textbox(‘getText‘);
var nickName = $(‘#nickNameId‘).textbox(‘getText‘);
var department = $(‘#departmentId‘).textbox(‘getText‘);
var phone = $(‘#phoneId‘).textbox(‘getText‘);
var Oper = document.getElementById("Oper").value;
if (Oper == "add") {
$.ajax({
type: "post", //要用post方式
contentType: "application/json", //傳值的方式
url: "Test.aspx/GetValueAjax", //方法所在頁面和方法名
data: "{username:‘" + userName + "‘" +
",nickname:‘" + nickName + "‘" +
",department:‘" + department + "‘" +
",phone:‘" + phone + " ‘" + "}",
dataType: "json",
success: function (data) {
// alert(data.d);
var json = JSON.parse(data.d);
var row_data = {
‘userId‘: json.rows.UserId,
‘userName‘: json.rows.UserName,
‘nickName‘: json.rows.NickName,
‘department‘: json.rows.Department,
‘phone‘: json.rows.Phone
};
$(‘#datagrid_line‘).datagrid(‘appendRow‘, row_data);
$(‘#addDialog‘).dialog(‘close‘);
$.messager.alert("提示", "添加用戶成功！", "info");
$(‘#datagrid_line‘).datagrid(‘reload‘);
},
error: function (err) {
$.messager.alert("提示", "添加用戶失敗！", "info");
}
});
}
else
{
var row = $(‘#datagrid_line‘).datagrid(‘getSelected‘);
var rowIndex = 0;
if(row)
{
var Id = row.userId;
rowIndex = $(‘#datagrid_line‘).datagrid(‘getRowIndex‘, row);
}
$.ajax({
type: "post", //要用post方式
contentType: "application/json", //傳值的方式
url: "Test.aspx/GetEditValueAjax", //方法所在頁面和方法名
data: "{userId:‘" + Id + "‘" +
",username:‘" + userName + "‘" +
",nickname:‘" + nickName + "‘" +
",department:‘" + department + "‘" +
",phone:‘" + phone + "‘" + "}",
dataType: "json",
success: function (data) {
var json = JSON.parse(data.d);
$(‘#addDialog‘).dialog(‘close‘);
// 在後臺獲取到修改後的數據，刪除原來的被修改的那一行，再重新插入一行已修改的數據
$(‘#datagrid_line‘).datagrid(‘deleteRow‘, rowIndex);
$(‘#datagrid_line‘).datagrid(‘insertRow‘, {
index: rowIndex,
row: {
‘userId‘: json.rows.UserId,
‘userName‘: json.rows.UserName,
‘nickName‘: json.rows.NickName,
‘department‘: json.rows.Department,
‘phone‘: json.rows.Phone
}
});
$(‘#datagrid_line‘).datagrid(‘reload‘);
$.messager.alert("提示", "修改用戶信息成功！", "info");
},
error: function (err) {
$.messager.alert("提示", "修改用戶信息失敗！", "info");
}
});
}
}
// 刷新頁面，重新加載數據
function refresh()
{
$.ajax({
type: "post", //要用post方式
url: "Test.aspx/GetUserList", //方法所在頁面和方法名
data: {},
contentType: "application/json;charset=utf-8", // 從服務器獲取得到json格式數據
dataType: "json",
loadMsg: "正在加載，請稍後……",
success: function (data) {
// alert(data.d);
var json = JSON.parse(data.d); // 將後臺得到json格式的字符串轉換為字符串
// 清空datagrid中原有數據
var item = $(‘#datagrid_line‘).datagrid(‘getRows‘);
if (item) {
for (var n = item.length - 1; n >= 0; n--) {
var index = $(‘#datagrid_line‘).datagrid(‘getRowIndex‘, item[n]);
$(‘#datagrid_line‘).datagrid(‘deleteRow‘, index);
}
}
// 將獲取到的數據重新加載到頁面上
for (var k in json.rows) {
var row_data = {
‘userId‘: json.rows[k].UserId,
‘userName‘: json.rows[k].UserName,
‘nickName‘: json.rows[k].NickName,
‘department‘: json.rows[k].Department,
‘phone‘: json.rows[k].Phone
};
$("#datagrid_line").datagrid("appendRow", row_data);
}
}
});
}
// 刪除操作
function remove()
{
var oper = document.getElementById("Oper").value = "delete";
var row = $(‘#datagrid_line‘).datagrid(‘getSelected‘);
var rowIndex = 0;
if(row == null)
{
$.messager.alert("提示", "請選擇要刪除的行！", "info");
}
if(row)
{
var userId = row.userId;
rowIndex = $(‘#datagrid_line‘).datagrid(‘getRowIndex‘,row);
$.messager.confirm(‘提示‘, ‘你確定要刪除這條信息嗎？‘, function (r) {
if (r) {
$.ajax({
type: "post",
contentType: "application/json", //傳值的方式
url: "Test.aspx/DeleteUser",
data: "{userId:‘" + userId + "‘" + "}",
dataType: "text",
success: function (data) {
// alert(data);
if (data.d == "success") {
$.messager.alert("提示", "刪除成功！", "info");
}
$(‘#datagrid_line‘).datagrid(‘deleteRow‘, rowIndex);
var rows = $(‘#datagrid_line‘).datagrid("getRows");
$(‘#datagrid_line‘).datagrid("loadData", rows);
},
error: function (err) {
$.messager.alert("提示", "刪除失敗，請重新操作！", "info");
}
});
}
})
}
}
// 帶條件的查詢
function SearchInfo()
{
// alert(0);
var userName = document.getElementById("userName").value;
var department = document.getElementById("department").value;
alert(userName +","+ department);
$.ajax({
type: "post",
contentType: "application/json", //傳值的方式
url: "Test.aspx/SearchUser",
data: "{userName:‘" + userName + "‘" + ",department:‘" + department + "‘" + "}",
dataType: "json",
contentType: "application/json;charset=utf-8", // 從服務器獲取得到json格式數據
success: function (data) {
alert(data.d);
var d = JSON.parse(data.d); // 將後臺得到json格式的字符串轉換為字符串
// 清空datagrid中原有數據
var item = $(‘#datagrid_line‘).datagrid(‘getRows‘);
if (item)
{
for (var i = item.length - 1; i >= 0; i--)
{
var index = $(‘#datagrid_line‘).datagrid(‘getRowIndex‘, item[i]);
$(‘#datagrid_line‘).datagrid(‘deleteRow‘, index);
}
}
// 遍歷查詢到的數據
for (var j in d.rows) {
var row_data = {
‘userId‘: d.rows[j].UserId,
‘userName‘: d.rows[j].UserName,
‘nickName‘: d.rows[j].NickName,
‘department‘: d.rows[j].Department,
‘phone‘: d.rows[j].Phone
};
$("#datagrid_line").datagrid("appendRow", row_data);
}
},
error: function (error) {
$.messager.alert("提示", "查詢用戶信息失敗，請重新操作！", "info");
}
});
}
$(function () {
console.info("第一個combobox");
$.ajax({
type: "post", //要用post方式
url: "Test.aspx/getAllUser", //方法所在頁面和方法名
data: {},
contentType: "application/json; charset=utf-8", // 從服務器獲取得到json格式數據
dataType: "json",
success: function (data) {
console.info("data: " + data.d);
var d = JSON.parse(data.d);
console.info("d ===== " + d);
var themecombo2 = [];
for (var i in d) {
console.info("text : " + d[i].UserName);
themecombo2.push({ "text": d[i].UserName, "id": d[i].UserId }); // combobox列表值的顯示
$("#userCombobox").combobox("loadData", themecombo2);
}
},
error: function (err) {
$.messager.alert("提示", "加載數據失敗！", "info");
}
});
$("#userCombobox").combobox({
onSelect: function (rec) {
console.info("id: +++ " + rec.id);
getUserInfo(rec.id);
}
});
});
function getUserInfo(id) {
console.info("userId : " + id);
$.ajax({
type: "post", //要用post方式
url: "Test.aspx/getAllUserByUserId", //方法所在頁面和方法名
data: "{userId:" + id + "}",
contentType: "application/json; charset=utf-8", // 從服務器獲取得到json格式數據
dataType: "json",
success: function (data) {
console.info("data: " + data.d);
var d = JSON.parse(data.d);
console.info("d ===== " + d);
var themecombo2 = [];
console.info(d.UserName);
console.info(d.UserId);
themecombo2.push({ "text": d.UserName, "id": d.UserId }); // combobox列表值的顯示
console.info("themecombo2 : " + themecombo2);
$("#userNameCombobox").combobox("loadData", themecombo2);
},
error: function (err) {
$.messager.alert("提示", "加載數據失敗！", "info");
}
});
}
// $(‘#userCombobox‘).combobox({
// onSelect: function (rec) {
// console.info("第二個");
// console.info("userId: " + rec.id);
// console.info("userName: " + rec.text);
// $(‘#userNameCombobox‘).combobox({
// url:‘Test.aspx/getAlluserByUserId‘,
// queryParams: "{userId:‘" + rec.id + "}",
// valueField:‘UserId‘,
// textField:‘UserName‘
// });
// var url = ‘Test.aspx/getAllUserByUserId?userId=‘ + rec.id;
// $(‘#userNameCombobox‘).combobox(‘reload‘, url);
</script>
asp.net使用easyUI 前後臺數據交互