有时候做项目我们需要保存修改选择按钮对象，既然修改选择到的按钮，那就包括新增按钮和取消按钮，这是在页面上需要呈现许多按钮的选择，同时也需要取消按钮或者重新选择所需要选择的按钮对象，下面讲一下选择按钮的时候，保存修改，涉及到取消按钮高亮效果的选择。
一、使按钮高亮
可以绑定一个方法来进行选择到的对象进而修改。下面进入主题，这里我们在HTML上面设置了按钮，然后到script里面先 声明一个ID，然后在下面写一个方法点击选择对象，可以用console在页面上点击按钮的时候获取ID，然后声明一个ID ,因为之前在上面就已经设置了一个substring方法（substring() 函数返回字符串的指定部分。），所以这里调用这个方法。假如需要删掉这个按钮就要回到数据库里面把模块信息表和权限表的数据进行新增与删除。然后，创建一个新的数组把需要新增的按钮权限给到对应的模块明细ID里面，还需要创建新的数组把需要删除的按钮权限给到对应的模块明细ID。
然后回到方法，使用if else 判断按钮当前的状态，有两种情况一种之前没有被选中，另一种之前已经被选中。
然后呢，之前没有被选中，我们就做一个操作，将这个类使用removeclass移除，那么就是高亮被选中的效果。
二、使当前点击的按钮高亮（就需要判断这个按钮原先是否高亮）
1.原来没有高亮效果
如果等于负一，那数据库里面是没有这个权限的，然后往数组添加ID，把这个ID给到这个数组，数据库就有这个权限了。因为这个数组需要传到控制器，并且遍历所有的ID进行新增操作。
2。原有高亮效果，去掉又添加高亮效果
另外一种情况大于负一，对于同一个按钮，原先是已经选择到的，然后点击取消然后再点击这个按钮，这个时候应该要显示已经有这个权限了，简单点理解，就是已有的权限，去掉高亮效果之后又添加高亮效果。那么这个就是在原先删除的数组里面，因为这是已经有 的权限，那就意味着数据库已经存在，既然点击取消又点击高亮，就需要删除然后再新增，所以是大于负一。
删除或新增数组中的元素：splice
index：从哪里开始删除或者添加元素，开始的索引（必选）
howmany：删除元素的个数（必选）
iteml、itemX：添加进来的元素（可选）
把删除的数组去调用splice（）方法。
3.之前被选中
第一种情况，原先高亮，然后就直接取消高亮效果
这种情况，需要将权限从删除，使用indexOf获取到h这个ID并且大于负一，因为它已经有这个权限所以大于负一。还需要判断是否存在，若存在，就删除。
根据上面需要删除与新增的数组做下面需要删除、新增的权限。
视图点击选择对象的代码：
//点击选择对象
function changeSelect(ele)
{
console.log(ele.id);
var eleId = ele.id.substring(11, ele.id.length);
//判断按钮当前的状态
if ($(ele).hasClass("layui-btn-primary"))
{
$(ele).removeClass("layui-btn-primary");
//之前没有被选中
if (ModularDetailIds.indexOf(eleId) == -1) {
//当前在数据库中没有的权限
insertModularDetail.push(eleId);
}
else
{
//已有的权限，去掉高亮效果之后又添加高亮效果
if (delModularDetail.indexOf(eleId) > -1)
{
//删除数组中的元素
//array.splice(index,howmany,item1,.....,itemX)
//返回数组中通过测试的第一个元素的索引
//array.findIndex(function(currentValue, index, arr), thisValue)
//function(currentValue, index, arr)必需。为数组中的每个元素运行的函数。
delModularDetail.splice(delModularDetail.findIndex(function (item) { if (item == eleId) return item; }), 1);
//delModularDetail.splice(delModularDetail.findIndex(item => item == eleId), 1);
}
}
}
else
{
//之前被选中
$(ele).addClass("layui-btn-primary");
//是否是已有的权限
if (ModularDetailIds.indexOf(eleId) > -1) {
delModularDetail.push(eleId);
}
else
{
if (insertModularDetail.indexOf(eleId)>-1)
{
insertModularDetail.splice(insertModularDetail.findIndex(item => item == eleId),1);
}
}
}
//需要删除的权限
console.log(delModularDetail);
//需要新增的权限
console.log(insertModularDetail);
}
接下来进行视图的保存修改操作。
获取input标签里面的ID,还有获取页面上的ID再用if else 判断是否为空，获取表单元素提交表单，
设置一个提示还有一个计时器，用来关闭按钮的时间，最后关闭父窗口的弹窗（先得到iframe层的索引再执行关闭）。
视图保存修改的代码：
//保存修改
function submitForm()
{
$("#insertModularDetailIds").val(insertModularDetail);
$("#deleteModularDetailIds").val(delModularDetail);
var userType = $("#UserType").val();
var describe = $("#Describe").val();
if (userType != null && describe != null && userType != "" && describe != "") {
$("#formUserType").ajaxSubmit(function (message) {
//提示
layer.msg(message.Text, { icon: 0, skin: "layui-layer-molv" });
if (message.State) {
//设置计时器
setTimeout(closeThis, 1000);
}
});
} else {
layer.msg("请填写完整", { icon: 0, skin: "layui-layer-molv" });
}
return false;
}
//关闭父窗口的弹窗
function closeThis() {
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭
//调用父窗体的关闭（关闭所有按钮）。
//parent.layer.closeAll();
}跳转到控制器添加一个方法，保存修改选择到的按钮的操作。使用input标签里面的name值，获取页面上传过来的数据。
接下来，，修改数据，涉及到两个表 的修改数据，也可以使用事务回滚，try catch 方便捕获错误。查询用户类型数据，新增用户类型权限，分割字符串，然后foreach遍历数组，并且判断不等于空的时候，新增权限。遍历完再判断addJurisdictions列表里面内容大于0，说明是有数据的，然后做一个保存新增操作。
然后根据deljurisdictions分割字符串，并且判断不等于空，还有判断deljurisdictions大于0，大于0 就进行删除操作。
最后提交事务，修改成功。
控制器保存修改的代码：
public ActionResult UpdateUserType(SYS_UserType modUserType,string insertModularDetailIds,string deleteModularDetailIds)
{
ReturnJson msg = new ReturnJson();
using (var scope = new TransactionScope())
{
try
{
int oldCount = myModel.SYS_UserType.Count(m=>m.UserTypeID!=modUserType.UserTypeID&&m.UserType==modUserType.UserType);
if (oldCount == 0)
{
//查询用户类型表数据
SYS_UserType dbUserType = myModel.SYS_UserType.Single(m => m.UserTypeID == modUserType.UserTypeID);
dbUserType.UserType = modUserType.UserType;
dbUserType.Describe = modUserType.Describe;
dbUserType.typeClass = modUserType.typeClass;
myModel.Entry(dbUserType).State = EntityState.Modified;
myModel.SaveChanges();
List<PW_Jurisdiction> addJurisdictions = new List<PW_Jurisdiction>();
List<PW_Jurisdiction> delJurisdictions = new List<PW_Jurisdiction>();
//新增用户类型权限
//分割字符串
string[] arrModularDetailId = insertModularDetailIds.Split(',');
foreach (string item in arrModularDetailId)
{
if (item!="")
{
//新增权限
PW_Jurisdiction juridition = new PW_Jurisdiction();
juridition.UserTypeID = modUserType.UserTypeID;
juridition.ModularDetailID =Convert.ToInt32(item);
addJurisdictions.Add(juridition);
}
}
if (addJurisdictions.Count>0)
{
myModel.PW_Jurisdiction.AddRange(addJurisdictions);
myModel.SaveChanges();
}
//分割字符串
string[] arrDelModularDetailId = deleteModularDetailIds.Split(',');
foreach (string item in arrDelModularDetailId)
{
var intId = Convert.ToInt32(item);
if (item != "")
{
PW_Jurisdiction delJurisdiction = myModel.PW_Jurisdiction.Single(m=>m.UserTypeID==modUserType.UserTypeID
&&m.ModularDetailID == intId);
delJurisdictions.Add(delJurisdiction);
}
}
if (delJurisdictions.Count > 0)
{
myModel.PW_Jurisdiction.RemoveRange(delJurisdictions);
myModel.SaveChanges();
}
//提交事务
scope.Complete();
msg.State = true;
msg.Text = "修改成功";
}
else
{
msg.Text = "角色重复，请更改用户类型名称！";
}
}
catch (Exception e)
{
msg.Text = "数据异常！";
}
}
return Json(msg,JsonRequestBehavior.AllowGet);
}
扫一扫
594
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
