// 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>
转载于:https://www.cnblogs.com/rgcdlb/p/7065226.html
相关资源：JavaScript提高：005：ASP.NET使用easyUI TABS标签显示问题