使用Jquery+EasyUI 進行框架專案開發案例講解之二---使用者管理原始碼分享
阿新 • • 發佈:2018-12-31
$(function () { grid.bind(); AddUser(); //新增使用者 EditUser(); //編輯使用者 DeleteUser(); //刪除使用者 SetUserPassword(); //設定使用者密碼 $('#a_refresh').click(function () { $('#list').datagrid('reload'); }); }); /* 方法一繫結資料 var initList = function () { var winSize = { width: $(window).width() - 4, height: $(window).height() - 40 }; $('#list').datagrid({ url: "handler/UserAdminHandler.ashx", title: "系統使用者列表", iconCls: 'icon icon-list', width: winSize.width, height: winSize.height, nowrap: false, //折行 rownumbers: true, //行號 striped: true, //隔行變色 idField: 'Id', //主鍵 singleSelect: true, //單選 checkOnSelect: true, frozenColumns: [[]], columns: [[ { title: '主鍵', field: 'Id', hidden: true }, { title: '編號', field: 'Code', width: 150 }, { title: '登入名', field: 'UserName', width: 150, sortable: true }, { title: '使用者名稱', field: 'RealName', width: 150 }, { title: '部門', field: 'DepartmentName', width: 150 }, { title: '角色主鍵', field: 'RoleId', hidden: true }, { title: '有效', field: 'Enabled', width: 50, formatter: imgcheckbox }, { title: '郵箱地址', field: 'Email', width: 150 }, { title: '手機號碼', field: 'Mobile', width: 150 }, { title: '描述', field: 'Description', width: 200 } ]] }); } */ var grid = { bind: function () { var winSize = { width: $(window).width() - 4, height: $(window).height() - 40 }; $('#list').datagrid({ url: "handler/UserAdminHandler.ashx", title: "系統使用者列表", iconCls: 'icon icon-list', width: winSize.width, height: winSize.height, nowrap: true, //false:折行 rownumbers: true, //行號 striped: true, //隔行變色 idField: 'Id', //主鍵 singleSelect: true, //單選 checkOnSelect: true, //frozenColumns: [[]], columns: [[ { title: '主鍵', field: 'Id', hidden: true }, { title: '編號', field: 'Code', width: 150 }, { title: '登入名', field: 'UserName', width: 150, sortable: true }, { title: '使用者名稱', field: 'RealName', width: 150 }, { title: '部門', field: 'DepartmentName', width: 150 }, { title: '角色主鍵', field: 'RoleId', hidden: true }, { title: '有效', field: 'Enabled', width: 50, formatter: imgcheckbox }, { title: '郵箱地址', field: 'Email', width: 150 }, { title: '手機號碼', field: 'Mobile', width: 150 }, { title: '描述', field: 'Description', width: 200 }, { title: 'Enabled', field: 'Enabled', hidden: true }, { title: 'Gender', field: 'Gender', hidden: true }, { title: 'UserPassword', field: 'UserPassword', hidden: true }, { title: 'Birthday', field: 'Birthday', formatter: date2str, hidden: true }, { title: 'Telephone', field: 'Telephone', width: 200, hidden: true }, { title: 'Duty', field: 'Duty', hidden: true }, { title: 'QICQ', field: 'QICQ', hidden: true }, { title: 'Title', field: 'Title', hidden: true }, { title: 'RoleId', field: 'RoleId', hidden: true }, { title: 'CompanyId', field: 'CompanyId', hidden: true }, { title: 'CompanyName', field: 'CompanyName', hidden: true }, { title: 'DepartmentId', field: 'DepartmentId', hidden: true }, { title: 'DepartmentName', field: 'DepartmentName', hidden: true }, { title: 'WorkgroupId', field: 'WorkgroupId', hidden: true }, { title: 'WorkgroupName', field: 'WorkgroupName', hidden: true }, { title: 'HomeAddress', field: 'HomeAddress', hidden: true } ]] }); }, getSelectedRow: function () { return $('#list').datagrid('getSelected'); } } var imgcheckbox = function (cellvalue, options, rowObject) { return cellvalue ? '<img src="/css/icon/ok.png" alt="正常" title="正常" />' : '<img src="/css/icon/stop.png" alt="禁用" title="禁用" />'; } var date2str = function (cellvalue, options, rowObject) { if (cellvalue) return $D(cellvalue).strftime("%Y-%m-%d"); else return ''; } var initUIform = function () { top.$('#w').hWindow({ html: pform, width: 640, height: 520, title: '新增使用者', iconCls: 'icon-add', submit: function () { var flag = true; top.$('#uiform input').each(function () { if ($(this).attr('required') || $(this).attr('validType')) { if (!top.$(this).validatebox('isValid')) { flag = false; return; } } }); var vRoleId = top.$('#txtRoleId').combobox('getValue'); var vCompanyId = top.$('#txtCompanyName').combobox('getValue'); var vDepartmentId = top.$('#txtDepartmentName').combobox('getValue'); var vWorkgroupId = top.$('#txtWorkgroupName').combobox('getValue'); var vCompanyName = top.$('#txtCompanyName').combobox('getText'); var vDepartmentName = top.$('#txtDepartmentName').combobox('getText'); var vWorkgroupName = top.$('#txtWorkgroupName').combobox('getText'); var queryString = top.$('#uiform').serialize() + '&action=add'; queryString = queryString + '&vRoleId=' + vRoleId + '&vCompanyId=' + vCompanyId + '&vDepartmentId=' + vDepartmentId + '&vWorkgroupId=' + vWorkgroupId; queryString = queryString + '&vCompanyName=' + vCompanyName + '&vDepartmentName=' + vDepartmentName + '&vWorkgroupName=' + vWorkgroupName; $.ajaxtext('handler/UserAdminHandler.ashx', queryString, function (msg) { if (msg == "1") { top.$('#notity').jnotifyAddMessage({ text: '新增成功.', permanent: false, type: 'message' }); top.$('#w').window('close'); $('#list').datagrid('reload'); } else if (msg == "0") { top.$('#notity').jnotifyAddMessage({ text: '使用者名稱已存,請更換使用者名稱.', permanent: false, type: 'warning' }); top.$('#txtUsername').select(); return false; } else { alert(msg); } }); return false; } }); top.$('#uiform input').each(function () { if ($(this).attr('required') || $(this).attr('validType')) top.$(this).validatebox(); }); top.$('#txtBirthday').datebox(); } //新增使用者 var AddUser = function () { $('#a_add').click(function () { if ($(this).linkbutton('options').disabled == true) { return; } initUIform(); //繫結各資料字典 pubMethod.bindCategory('txtGender', 'Gender'); pubMethod.bindCategory('txtRoleId', 'null'); pubMethod.bindCategory('txtCompanyName', 'Company'); pubMethod.bindCategory('txtDepartmentName', 'Department'); pubMethod.bindCategory('txtWorkgroupName', 'Workgroup'); top.$('#chkEnabled').attr("checked", true); top.$('#txtUserName').focus(); top.$('#txtDescription').val(""); }); } //修改使用者 var EditUser = function () { $('#a_edit').click(function () { if ($(this).linkbutton('options').disabled == true) { return; } var selectRow = grid.getSelectedRow(); if (selectRow != null) { if (selectRow.UserName != '' && selectRow.UserName == 'Administrator' && curUserinfo.username != 'Administrator') { $.messager.alert('警告提示', '你不能修改超級管理員使用者!', 'warning'); return false; } //彈窗 top.$('#w').hWindow({ html: pform, width: 640, height: 520, title: '修改使用者', iconCls: 'icon-edit', submit: function () { var flag = true; top.$('#uiform input').each(function () { if ($(this).attr('required') || $(this).attr('validType')) { if (!top.$(this).validatebox('isValid')) { flag = false; return; } } }); var vRoleId = top.$('#txtRoleId').combobox('getValue'); var vCompanyId = top.$('#txtCompanyName').combobox('getValue'); var vDepartmentId = top.$('#txtDepartmentName').combobox('getValue'); var vWorkgroupId = top.$('#txtWorkgroupName').combobox('getValue'); var vCompanyName = top.$('#txtCompanyName').combobox('getText'); var vDepartmentName = top.$('#txtDepartmentName').combobox('getText'); var vWorkgroupName = top.$('#txtWorkgroupName').combobox('getText'); var queryString = top.$('#uiform').serialize() + '&action=edit&id=' + selectRow.Id; queryString = queryString + '&vRoleId=' + vRoleId + '&vCompanyId=' + vCompanyId + '&vDepartmentId=' + vDepartmentId + '&vWorkgroupId=' + vWorkgroupId; queryString = queryString + '&vCompanyName=' + vCompanyName + '&vDepartmentName=' + vDepartmentName + '&vWorkgroupName=' + vWorkgroupName; $.ajaxtext('handler/UserAdminHandler.ashx', queryString, function (msg) { if (msg == "1") { top.$('#notity').jnotifyAddMessage({ text: '修改成功.', permanent: false, type: 'message' }); top.$('#w').window('close'); $('#list').datagrid('reload'); } else alert(msg); }); return false; } }); top.$('#uiform input').each(function () { if ($(this).attr('required') || $(this).attr('validType')) top.$(this).validatebox(); }); //繫結各資料字典 pubMethod.bindCategory('txtGender', 'Gender'); pubMethod.bindCategory('txtRoleId', 'null'); pubMethod.bindCategory('txtCompanyName', 'Company'); pubMethod.bindCategory('txtDepartmentName', 'Department'); pubMethod.bindCategory('txtWorkgroupName', 'Workgroup'); //初始化相關資料 top.$('#txtUserName').val(selectRow.UserName); top.$('#txtRealName').val(selectRow.RealName); top.$('#txtCode').val(selectRow.Code); top.$('#txtUserPassword').after('******').remove(); top.$('#txtGender').combobox('setValue', selectRow.Gender); top.$('#txtMobile').val(selectRow.Mobile); top.$('#txtBirthday').val(selectRow.Birthday); top.$('#txtTelephone').val(selectRow.Telephone); top.$('#txtDuty').val(selectRow.Duty); top.$('#txtQICQ').val(selectRow.QICQ); top.$('#txtTitle').val(selectRow.Title); top.$('#txtEmail').val(selectRow.Email); top.$('#txtRoleId').combobox('setValue', selectRow.RoleId); top.$('#txtCompanyName').combobox('setValue', selectRow.CompanyId); top.$('#txtDepartmentName').combobox('setValue', selectRow.DepartmentId); top.$('#txtWorkgroupName').combobox('setValue', selectRow.WorkgroupId); top.$('#txtHomeAddress').val(selectRow.HomeAddress); top.$('#txtDescription').val(selectRow.Description); top.$('#chkEnabled').attr("checked", selectRow.Enabled == "1"); } else { top.$('#notity').jnotifyAddMessage({ text: '請選擇要修改的使用者.', permanent: false, type: 'warning' }); return false; } }); } //刪除使用者 var DeleteUser = function () { $('#a_delete').click(function () { if ($(this).linkbutton('options').disabled == true) { return; } var selectRow = grid.getSelectedRow(); if (selectRow) { if (selectRow.Id != '' && selectRow.Id == curUserinfo.id) { $.messager.alert('警告提示', '不能刪除當前登入使用者!', 'warning'); return false; } if(selectRow.UserName != '' && selectRow.UserName == 'Administrator') { $.messager.alert('警告提示', '不能刪除超級管理員使用者!', 'warning'); return false; } $.messager.confirm('詢問提示', '確認要刪除所選使用者嗎?', function (data) { if (data) { $.ajaxtext('handler/UserAdminHandler.ashx', 'action=delete&id=' + selectRow.Id, function (msg) { if (msg == '1') { $.messager.alert('成功提示', '所選使用者刪除成功!'); $('#list').datagrid('reload'); } else { $.messager.alert('錯誤提示', msg, 'error'); } }); } }); } else { top.$('#notity').jnotifyAddMessage({ text: '請選擇要刪除的使用者。', permanent: false, type: 'warning' }); return; } }); } //設定使用者密碼 var SetUserPassword = function () { $('#a_editpassword').click(function () { if ($(this).linkbutton('options').disabled == true) { return; } var selectRow = grid.getSelectedRow(); if (selectRow != null) { top.$('#d').hDialog({ width: 300, height: 160, title: '設定使用者密碼', iconCls: 'icon-key', html: formeditpass, submit: function () { if (top.$('#txtNewPassword').validatebox('isValid')) { $.ajaxtext('handler/UserAdminHandler.ashx', "action=setpassword&id=" + selectRow.Id + '&password=' + top.$('#txtNewPassword').val(), function (msg) { if (msg == "1") { top.$('#notity').jnotifyAddMessage({ text: '密碼修改成功!請牢記新密碼。', permanent: false, type: 'warning' }); top.$('#d').dialog('close'); } else alert(msg); }) } } }); top.$('#loginname').text(selectRow.UserName + ' | ' + selectRow.RealName); top.$('#txtNewPassword').validatebox(); } else { top.$('#notity').jnotifyAddMessage({ text: '請選擇要修改密碼的使用者。', permanent: false, type: 'warning' }); return false; } }); } //公共方法 var pubMethod = { bindCategory: function (categoryControl, categoryCode) { if (categoryControl == '' || categoryCode == '') { return; } if (categoryControl == 'txtGender') { top.$('#' + categoryControl).combobox({ url: 'Modules/handler/DataItemAdminHandler.ashx?action=GetCategory&categorycode=' + categoryCode, method: 'get', valueField: 'ItemValue', textField: 'ItemName', editable: false, panelHeight: 'auto' }); } if (categoryControl == 'txtRoleId') { top.$('#' + categoryControl).combobox({ url: 'Modules/handler/RoleAdminHandler.ashx?action=GetEnabledRoleList', method: 'get', valueField: 'Id', textField: 'RealName', editable: false, panelHeight: 'auto' }); } if (categoryControl == 'txtCompanyName' || categoryControl == 'txtDepartmentName' || categoryControl == 'txtWorkgroupName') { top.$('#' + categoryControl).combobox({ url: 'Modules/handler/OrganizeAdminHander.ashx?action=GetOrganizeByCategory&OrganizeCategory=' + categoryCode, method: 'get', valueField: 'Id', textField: 'FullName', editable: false, panelHeight: 'auto' }); } } } var pform = '<form id="uiform"><table cellpadding=5 cellspacing=0 width=100% align="center" class="grid2" border=0><tr><td align="right">'; pform += '登入使用者名稱:</td><td><input name="UserName" id="txtUserName" validType="length[2,40]" required="true" type="text" class="txt03" ></td><td align="right">'; pform += '姓名:</td><td><input name="RealName" id="txtRealName" validType="length[2,40]" required="true" type="text" class="txt03" ></td></tr><tr><td align="right">'; pform += '編號:</td><td><input name="Code" id="txtCode" validType="length[2,40]" type="text" class="txt03" ></td><td align="right">'; pform += '使用者密碼:</td><td><input validType="safepass" required="true" name="UserPassword" id="txtUserPassword" type="password" class="txt03" ></td></tr><tr><td align="right">'; pform += '性別:</td><td><input name="Gender" id="txtGender" required="true" type="text" class="txt03" ></td><td align="right">'; pform += '手機號碼:</td><td><input name="Mobile" id="txtMobile" type="text" class="txt03" ></td></tr><tr><td align="right">'; pform += '出生日期:</td><td><input name="Birthday" id="txtBirthday" type="text" class="txt03" ></td><td align="right">'; pform += '固定電話:</td><td><input name="Telephone" id="txtTelephone" type="text" class="txt03" ></td></tr><tr><td align="right">'; pform += '崗位:</td><td><input name="Duty" id="txtDuty" type="text" class="txt03" ></td><td align="right">'; pform += 'QQ號碼:</td><td><input name="QICQ" id="txtQICQ" type="text" class="txt03" ></td></tr><tr><td align="right">'; pform += '職稱:</td><td><input name="Title" id="txtTitle" type="text" class="txt03" ></td><td align="right">'; pform += '郵箱地址:</td><td><input name="Email" id="txtEmail" type="text" class="txt03" ></td></tr><tr><td align="right">'; pform += '預設角色:</td><td><input name="RoleId" id="txtRoleId" type="text" class="txt03" ></td><td align="right">'; pform += '公司名稱:</td><td><input name="CompanyName" id="txtCompanyName" type="text" class="txt03" ></td></tr><tr><td align="right">'; pform += '部門名稱:</td><td><input name="DepartmentName" id="txtDepartmentName" type="text" class="txt03" ></td><td align="right">'; pform += '工作組:</td><td><input name="WorkgroupName" id="txtWorkgroupName" type="text" class="txt03" ></td></tr><tr><td align="right">'; pform += '家庭地址:</td><td colspan="3"><input name="HomeAddress" style="width:470px;" id="txtHomeAddress" type="text" class="txt03" ></td></tr><tr><td align="right">'; pform += '有效性:</td><td colspan="3"><input id="chkEnabled" type="checkbox" name="Enabled" /><label>有效</label> <span style="color:#666;padding-left:20px;">注:使用者無效(禁用該使用者)後,該使用者將不能登入。</span></td></tr><tr><td align="right"> '; pform += '描述:</td><td colspan =3><textarea id="txtDescription" name="Description" rows="3" style="width:470px;height:50px;" class="txt03"></td></tr></table></form>'; var formeditpass = '<table class="grid" id="epform">'; formeditpass += '<tr><td>登入名:</td><td><span id="loginname"></span></td></tr>'; formeditpass += '<tr><td>新密碼:</td><td><input validType="safepass" required="true" id="txtNewPassword" name="password" type="password" class="txt03" /></td></tr>'; formeditpass += '</table>';