您的位置:首页 > 产品设计 > UI/UE

easy ui 单元格编辑 功能 实现的全步骤代码&& 增删改查的实现思路 表白双笙,诸君拔剑吧!

2019-08-02 10:26 106 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/qq_38762411/article/details/98173661

1/在创建好表格实现了datagrid表格输出数据之后,去复制一个别人写好的单元格修改的代码大致如下
//记得把$(’#datagrid’)修改成自己的命名
//之后你可以看下能双击单元格编辑了没能编辑了就继续下面的

$.extend($.fn.datagrid.methods, {
editCell: function (jq, param) {
return jq.each(function () {
var opts = $(this).datagrid('options');
var fields = $(this).datagrid('getColumnFields', true).concat($(this).datagrid('getColumnFields'));
for (var i = 0; i < fields.length; i++) {
var col = $(this).datagrid('getColumnOption', fields[i]);
col.editor1 = col.editor;
if (fields[i] != param.field) {
col.editor = null;
}
}
$(this).datagrid('beginEdit', param.index);
for (var i = 0; i < fields.length; i++) {
var col = $(this).datagrid('getColumnOption', fields[i]);
col.editor = col.editor1;
}
});
}
});

var editIndex = undefined;

function endEditing() {
if (editIndex == undefined) { return true }
if ($('#datagrid').datagrid('validateRow', editIndex)) {
$('#datagrid').datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
return false;
}
}

function onClickCell(index, field) {
if (endEditing()) {
$('#datagrid').datagrid('selectRow', index)
.datagrid('editCell', { index: index, field: field });
editIndex = index;
}
}

之后写修改的方法,写好后断点检查下有没有获取到修改后的值,之后之后把每个值进行绑定就是data{列名:数据}之后把这些交给action后台就是了

function edit() {
endEditing()
var rows = $('#datagrid').datagrid('getSelections');
if (rows.length == 1) {
$.messager.confirm('确认', '您确修改除编号为:' + rows[0].FKey + '&nbsp的记录吗?', function (r) {
if (r) {
var data = rows[0];
var urls = "../../../Handler/Test/TestPlanHandler.ashx?action=edit&FKey=" + data.FKey;
$.ajax({
type: "GET",
cache: false,
url: urls,
data: {
'FBigModule': data.FBigModule,
'FChildModule': data.FChildModule,
'FMethod': data.FMethod,
'FFullMethod': data.FFullMethod,

},
dataType: 'json',
});

}
});

} else {
$.messager.alert('系统消息', '请选择<span style="color:red" >&nbsp 1 &nbsp 行 &nbsp</span>进行修改');
}

}

后台就比较简单了调用方法把数据提交到数据库去就好了
action进行判断之后操作数据

else if (action == "edit")
{
var entity = context.Request.DeserializeObject<TestInfo>();
var res = TestInfoBLL.AddOrEdit(DoAction.Edit, entity);
var result = new DWZResult<int>(res).SetClose();
return result.ToString();

}

之后其他层的代码,这个是BLL层不要管其他的
返回是去DAL层就好了
return dal.AddOrEdit(doAction, entity);

public static ResultInfo<int> AddOrEdit(DoAction doAction, TestInfo entity)
{
if (doAction != DoAction.Add && doAction != DoAction.Edit)
{
return new ResultInfo<int>((int)entity.FKey)
{
Desc = $"操作类型不支持.{doAction}",
StatusCode = StatusCode.Fail
};
}
return dal.AddOrEdit(doAction, entity);
}

之后这个就是DAL层对数据进行操作了

/// <summary>
/// 添加和修改
/// </summary>
/// <param name="doAction"></param>
/// <param name="entity"></param>
/// <returns></returns>
public ResultInfo<int> AddOrEdit(DoAction doAction, TestInfo entity)
{
//根据主键Fkey 新增
var result = new ResultInfo<int>((int)entity.FKey);
//打开数据连接
var cmd = WriteDbCommand;
var parameter = new Parameter();
parameter.Add("FAssert", entity.FAssert);
parameter.Add("FBigModule", entity.FBigModule);
parameter.Add("FChildModule", entity.FChildModule);
parameter.Add("FCreater", entity.FCreater);
parameter.Add("FFullMethod", entity.FFullMethod);
parameter.Add("FInPara", entity.FInPara);
parameter.Add("FIsSys", entity.FIsSys);
parameter.Add("FMessage", entity.FMessage);
parameter.Add("FMethod", entity.FMethod);
parameter.Add("FMethodID", entity.FMethodID);
parameter.Add("FModuleCaption", entity.FModuleCaption);
parameter.Add("FOutPara", entity.FOutPara);
parameter.Add("FSignKey", entity.FSignKey);
parameter.Add("FStateCode", entity.FStateCode);
parameter.Add("FTester", entity.FTester);
parameter.Add("FTestTime", entity.FTestTime);
parameter.Add("FUrl", entity.FUrl);
parameter.Add("FUserToken", entity.FUserToken);

//如果是添加操作的话
if (doAction == DoAction.Add)
{
//添加值
cmd.ExecuteNonQuery($@"INSERT INTO t_TestInfo(FBigModule , FChildModule , FMethod , FFullMethod ,
FStateCode , FMessage , FSignKey , FUserToken , FUrl , FInPara ,FOutPara ,
FAssert , FTester  , FCreater ,FMethodID , FIsSys , FModuleCaption)
VALUES(@FBigModule,@FChildModule ,@FMethod ,@FFullMethod ,@FStateCode , @FMessage ,
@FSignKey ,@FUserToken ,@FUrl ,@FInPara ,@FOutPara ,@FAssert ,
@FTester  ,@FCreater ,@FMethodID ,@FIsSys ,@FModuleCaption)", parameter);
}
else
{
//根据Fkey修改值
cmd.ExecuteNonQuery($@"UPDATE t_TestInfo SET
FBigModule=@FBigModule,
FChildModule=@FChildModule,
FMethod=@FMethod,
FFullMethod=@FFullMethod,
FStateCode=@FStateCode,
FMessage=@FMessage,
FSignKey=@FSignKey,
FUserToken=@FUserToken,
FUrl=@FUrl,
FInPara=@FInPara,
FOutPara=@FOutPara,
FAssert=@FAssert,
FTester=@FTester,
FCreater=@FCreater,
FMethodID=@FMethodID,
FIsSys=@FIsSys,
FModuleCaption=@FModuleCaption
WHERE FKey={entity.FKey}",parameter);
}
//关闭数据连接
cmd.Commit();
//返回
return result;

}

这么一套下来基本OK了。整个修改基本实现了,不管是表单,行,单元格修改
都是‘获取到想要的数据数据’,‘和列绑定’,之后‘提交到数据库’就行了。

增删改都擦不多获取到操作需要的数据,传到dal层,SQL语句操作数据

easyui查询我还没有实现成功,额很纠结好像有封装好的不知道怎么用
后续会持续更新的,如果觉得本文章对你有帮助,

点赞,评论,收藏,关注 ,那个都行让我知道我浅薄的知识能帮住到别人

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐