基于Easyui框架的datagrid绑定数据，新增，修改，删除方法(一)

基于Easyui框架的datagrid绑定数据，新增，修改，删除方法
第一种：https://blog.csdn.net/u012949335/article/details/81943387
第二种：https://blog.csdn.net/u012949335/article/details/81910663
第三种：https://blog.csdn.net/u012949335/article/details/81777842
第四种：https://blog.csdn.net/u012949335/article/details/81777744

@{ViewBag.Title = "UsersList";
}<script type="text/javascript">$(function(){BindData();})//当请求远程数据时，发送的额外参数。function GetqueryParams() {var Params = {};Params.SearchRole = $("#SearchRole").combobox('getValue');Params.Jzzhch = $("#txtUserZhxm").textbox('getValue');return Params;}function UserinfoSearch(){$("#dg").datagrid("reload",GetqueryParams());}//删除function User_Del() {var rows = $('#dg').datagrid("getSelections");if (rows.length > 0) {$.messager.confirm("提示", "你确定要删除吗?", function (r) {if (r) {var ids = [];for (var i = 0; i < rows.length; i++) {ids.push(rows[i].userid);}var jsonObject = JSON.stringify(ids);DelRows(jsonObject);}});}else {$.messager.alert("提示", "请选择要删除的行", "error");}}function DelRows(userids) {$.ajax({type: 'post',dataType: "json", //返回json格式的数据url: "UsersList_Del",data: { 'UsersJson': userids },cache: false,success: function (Data) {if (Data == "1") {$('#dg').datagrid("reload");$.messager.alert("提示", "删除成功");}else {$.messager.alert("提示", "删除失败", "error");}},error: function (e) {var msg = responseTextTitle(e.responseText);$.messager.alert("提示", msg, "error");}});}function getRowIndex(target) {var tr = $(target).closest('tr.datagrid-row');return parseInt(tr.attr('datagrid-row-index'));}function EidtUserForm(target) {var title="编辑";if (target) {var thisindex = getRowIndex(target);var row = $('#dg').datagrid('getRows')[thisindex];$('#txtuserid').textbox('readonly',true);$('#txtuserzh').textbox('readonly',true);$('#txtuserid').textbox("setValue",row.userid);$('#txtuserzh').textbox('setValue',row.userzh);$('#password1').textbox("setValue","");$('#password2').textbox("setValue","");$('#txtusername').textbox("setValue", row.username);$('#userrole').combobox('setValues', row.role);$("input[name='status'][value=" + row.status + "]").prop("checked", true);$('#dg').datagrid('clearSelections');}else {$('#txtuserid').textbox('readonly',true);$('#txtuserzh').textbox('setValue',"");$('#txtuserzh').textbox('readonly',false);$('#txtuserid').textbox("setValue","");$('#password1').textbox("setValue","");$('#password2').textbox("setValue","");$('#txtusername').textbox("setValue", "");$('#userrole').combobox('setValues', "");$("input[name='status'][value='1']").prop("checked", true);title="新增";}$('#window_userinfo').window({width: 500,title: title,modal: true});$('#window_userinfo').window('open');$('#window_userinfo').window('vcenter');$('#window_userinfo').window('hcenter');}function SaveUserInfo(){var isValid = $("#yzxx").form('enableValidation').form('validate');if (!isValid) {$.messager.progress('close'); // hide progress bar while the form is invalidreturn isValid;}if($('#password1').textbox("getValue")!=$('#password2').textbox("getValue")){$.messager.alert("提示", "两次密码输入不一样", "");return false;}if($('#userrole').combobox("getValues")==""){$.messager.alert("提示", "请选择角色", "");return false;}//var userinfo = $('#yzxx').serializeObject();var userinfo = new Object();userinfo.userid=$('#txtuserid').textbox("getValue");userinfo.userzh=$('#txtuserzh').textbox("getValue");userinfo.username=$('#txtusername').textbox("getValue");userinfo.passwd=$('#password1').textbox("getValue");userinfo.role=$('#userrole').combobox('getValue');userinfo.status=$("input[name='status']:checked").val();var jsonObject = JSON.stringify(userinfo);$.ajax({type: 'post',dataType: "json",url: "@Url.Content("~/Home/UsersList_UsersInfoAddEdit")",data: { 'json': jsonObject },cache: false,success: function (data) {if (data == "1") {$.messager.alert("提示", "保存成功", "");$('#dg').datagrid("reload");$('#window_userinfo').window('close');}else {$.messager.alert("提示", data.msg, "error");}},error: function (e) {$.messager.alert("提示", "保存失败" + e.toString(), "error");}});}function BindData() {var queryParams = GetqueryParams();$('#dg').datagrid({width: 'auto',height: 'auto',scrollbarSize: 0,autoRowHeight: false,url: "@Url.Content("~/Home/UsersList_BindSearch")",queryParams: queryParams,checkOnSelect:false,selectOnCheck:true,idField: 'userid',columns: [[{ field: 'ck', title: '选择', sortable: true, checkbox: true },{ field: 'userid', title: '编号', width: "10%", sortable: true },{ field: 'userzh', title: '用户账号', width: "10%", sortable: true },{ field: 'username', title: '姓名', width: "20%", sortable: true},{ field: 'status', title: '状态', width: "20%", sortable: true,formatter:function(value, row, index){return row.zt;}  },{ field: 'role', title: '角色', width: "20%", sortable: true ,formatter:function(value, row, index){return row.dmmc;}  },{ field: 'action', title: '操作', width: "15%", align: 'center',formatter: function (value, row, index) {var e = '<a class="but-link" href="javascript:void(0)" onclick="EidtUserForm(this)"><span class="icon icon-edit"></span>编辑</a> ';return e;}}]],onLoadSuccess: function(data){//加载完毕后获取所有的checkbox遍历if (data.rows.length > 0) {//循环判断操作为新增的不能选择for (var i = 0; i < data.rows.length; i++) {//根据userid让某些行不可选if (data.rows[i].userid == "system") {$("input[type='checkbox']")[i + 1].disabled = true;//禁用//$("input[type='checkbox']")[i + 1].remove();//移除}}//$(".datagrid-header-check").html("");}else{$(".div_empty").css({ "display": "block" });$(this).closest('div.datagrid-wrap').find('div.datagrid-pager').hide();}},//当用户勾选全部行时触发onCheckAll : function(rows) {  $("input[type='checkbox']").each(function(index, el) {if(el.disabled== true){$("#dg").datagrid('uncheckRow', index-1);//此处参考其他人的代码，原代码为unselectRow }var checkboxHeader = $('div.datagrid-header-check input[type=checkbox]');//取到全选全不选这个元素checkboxHeader.prop("checked","checked");//将其设置为checked即可});},onClickRow: function(rowIndex, rowData){//加载完毕后获取所有的checkbox遍历$("input[type='checkbox']").each(function(index, el){//如果当前的复选框不可选，则不让其选中if (el.disabled == true) {//POSStockHeadTable.datagrid('unselectRow', index - 1);}})},pageSize: 10,pageList: [10, 20, 30, 50],fitColumns: true,striped: true,pagination: true, //分页控件 rownumbers: true, //行号onLoadError: function (e) {$.messager.alert("提示", "加载失败", "error");}});}</script><div class="tools-row"><table width="100%" id="table" style="padding-left:8px; border-spacing:0px; border-collapse:separate;"><tr><td style="height:28px;" colspan="2">@{Html.RenderAction("SearchRole", "Shared");}账号（编号或姓名）：<input class="easyui-textbox" id="txtUserZhxm" data-options="width:80"/>&nbsp; &nbsp; <button id="btnsearch" type="button" class="but-default" onclick="UserinfoSearch()"><span class="icon icon-magnifier"></span> 查询</button></td></tr></table>
</div>
<div class="tools-row"><table cellpadding="0" cellspacing="0" style="width:100%"><tr><td align="right"><button id="btnadd" type="button" class="but-primary" onclick="EidtUserForm()"><span class="icon icon-add"></span>新增</button>&nbsp;&nbsp;<button id="btndel" type="button" class="but-primary" onclick="User_Del()"><span class="icon icon-delete"></span>删除</button></td></tr></table>
</div>
<table id="dg"></table>
<div class="div_empty" style="height: 150px; display:none; border-top: 0px solid; background-color:White;"><div style="width: 95%; text-align: center; border: 0px; margin-top: 5%; font-size:20px; font-family: 宋体;position: absolute">暂无数据！</div></div><div id="window_userinfo" class="easyui-window" title="修改密码" data-options="modal:true,closed:true,region:'center'">
<form id="yzxx" method="post"><table cellpadding="5" class="basetable"><tr><td>编号(自动生成)：</td><td><input class="easyui-textbox" id="txtuserid" placeholder="自动生成" type="text" name="username"></input></td></tr><tr><td>用户账号：</td><td><input class="easyui-textbox" id="txtuserzh" type="text" name="username" data-options="required:true"></input></td></tr><tr><td>姓名：</td><td><input class="easyui-textbox" id="txtusername" type="text" name="username" data-options="required:true"></input></td></tr><tr><td>密码:</td><td><input id="password1" class="easyui-textbox" type="password" data-options="required:true,validType:'length[6,50]'" /></td></tr><tr><td>确认密码:</td><td><input id="password2" class="easyui-textbox" type="password" data-options="required:true,validType:'length[6,50]'" /></td></tr><tr><td>角色：</td><td>@model YidiTutor.Models.comboboxModel_Json<input id="userrole" class="easyui-combobox" name="userrole" style="width:80px;" data-options="data:@Model.data,method:'get',editable:false,valueField:'dm',textField:'dmmc',panelHeight:'auto'"/></td></tr><tr><td>用户状态：</td><td colspan="3"><input id="stauts1" type="radio" name="status" value="1" /><label for="stauts0">启用</label><input id="stauts0" type="radio" name="status" value="0" /><label for="stauts1">禁用</label></td></tr><tr><td colspan="4" align="right"><a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save'" style="width: 80px"onclick="SaveUserInfo()">保存</a> <a href="javascript:void(0)" class="easyui-linkbutton"data-options="iconCls:'icon-cancel'" onclick="$('#window_userinfo').window('close')" style="width: 80px">取消</a></td></tr></table>
</form>
</div>

基于Easyui框架的datagrid绑定数据，新增，修改，删除方法(一)相关推荐

毕业设计：基于SSM框架的新生报到数据可视化系统
前言:本文介绍的是一个基于SSM框架的新生报到数据可视化系统,是一个毕业设计成品,该系统主要采用JAVA语言编写,主要应用到了SpringBoot框架,Mybatis框架.mysql数据库以及redi ...
稳扎稳打Silverlight(17) - 2.0数据之详解DataGrid, 绑定数据到ListBox
[索引页] [源码下载] 稳扎稳打Silverlight(17) - 2.0数据之详解DataGrid, 详解ListBox 作者:webabcd 介绍 Silverlight 2.0 详解DataG ...
快速开发框架，及库存管理系统，基于easyui框架和C#语言MVC、EntityFrameWork、T4模板技术。...
快速开发框架,及库存管理系统,基于easyui框架和C#语言MVC.EntityFrameWork.T4模板技术. 产品界面如下图所示: 源码结构: 开放全部源码,如有需要请联系,QQ:1107141 ...
javaWeb基于SSM框架开发的社区医疗数据管理系统【项目源码+数据库脚本+报告】
一.项目简介本项目是一套基于SSM框架开发的社区医疗数据管理系统,主要针对计算机相关专业的正在做bishe的学生和需要项目实战练习的Java学习者. 包含:项目源码.数据库脚本等,该项目可以直接作为 ...
关于@Transactional(readOnly = false)注解，数据新增修改Connection is read-only
关于@Transactional(readOnly = false)注解,数据新增修改Connection is read-only 有时你新增或修改会报Connection is read-only ...
ajax获取网页新闻,基于Ajax的新闻网页动态数据的抓取方法及系统
主权项: 1.基于Ajax的新闻网页动态数据的抓取方法,其特征是,包括如下步骤:步骤(101):建立新闻网页爬取内容数据库,设置新闻网页爬取内容数据库的编码方式:获得待抓取新闻网页的新闻列表页面的UR ...
sharepoint 2016 学习系列篇(14)-自定义列表应用篇-(3)列表数据的新增,修改,删除操作
前面添加完列表的字段之后,接下来介绍列表数据的新增,修改,删除操作,不需要开发,就能实现数据的新增,修改,删除等操作. 重新返回到列表的http://192.168.1.73:7003/Lists/U ...
delphi百度人脸搜索（支持人脸搜索、人脸库新增修改删除查询）
下载链接:https://download.csdn.net/download/liushenglin123/12550077 [delphi百度人脸搜索]支持人脸搜索.人脸库新增修改删除查询
php对‘[{“id“:“1“,“name“:“cyg”},{“id“:“2“,“name“:“liwen“}]json数据进行修改删除操作
作者:陈业贵华为云享专家 51cto(专家博主明日之星 TOP红人) 阿里云专家博主文章目录前言代码删除效果修改效果前言对json数据进行修改删除操作,数组里面有两个json 代码 ...
Mysql 数据插入修改删除
MYSQL基础上机练习题(二) 数据插入.修改.删除一.实验目的: 数据插入.修改.删除数据表的复制字段分列二.实验内容: 对实验一所展示的表进行数据输入.修改.删除以下为Employee ...

基于Easyui框架的datagrid绑定数据，新增，修改，删除方法(一)

基于Easyui框架的datagrid绑定数据，新增，修改，删除方法(一)相关推荐

最新文章

热门文章