本人一向是主张前端不要用什么框架,主要是框架的灵活性不大,而且臃肿。
最近公司在开发一个产品,先说说团队成员吧:4个开发(其中包含我)、一个项目经理、2个对业务比较熟悉的老总,没了,这个是我最不想的开发团队,因为没美工、没测试、没架构...反正这些都落到开发头上了,你们可以想象一下吧,我是中途插入这个项目的,说说自己的感受吧业务分析走前面没什么问题,可是架构、数据库设计这些不是应该走在前面嘛,反正....
不说了发发牢骚还是言归正传吧,这个插件主要是基于easyui对datagrid 进行扩展:包含表格内部新增、修改、删除:
以下是效果图:
插件源码:
/***********************************************************
作 者:wyb
创建时间:2016.01.13
更新时间:2016.01.28
-------------------------------------------------------------
名称:datagridExpand
功能:easyui datagrid 扩展 包含:新增、修改、删除、保存
参数:(以下参数都是可选参数)
名称 类型 描述
isDelColumn bool 是否新增【删除】操作列 默认值:true
DelColumnWidth string|int 删除列宽度 默认值:50
initNewRow bool 是否加载时新增行 默认值:true
endEditing function(editIndex,save) 保存之前回调函数,editIndex 当前编辑行索引,前提条件是:endEditingCofrim=true save datagrid保存方法
endEditingCofrim bool 结束编辑前是否确认, 外部方法根据情况调用保存方法 默认:false
removeit function(row,del) 删除行回调函数,前提条件是:removeitConfirm=true row 是删除行信息,del datagrid移除方法
removeitConfirm bool 是否确认服务器删除
endEdited function 保存成功回调方法
loadEnd function (appendRow) datagrid初始化完执行的方法,appendRow 新增行
isSaveAddRow bool 保存时是否自动新增行,默认:true
---------------------------------------------------------------
调用示例:
html:
<table id="dg" class="easyui-datagrid">
<thead>
<tr>
<th data-options="field:'field',width:'25%'"></th>
</tr>
<thead>
</table>
js:
$(funciton(){
$('#dg').datagridExpand({参数});
});
-------------------------------------------------------------
数据中加入字段:
disabledDel:true --该行不能被删除
disabledEdit:true --该行不能被编辑
--------------------------------------------------------------
************************************************************/
(function ($) {
$.fn.datagridExpand = function (options) {
options = $.extend({}, $.fn.datagridExpand.defaults, options);
var defaults = {
removeit: function (row, del) { }, //移除行回调函数
removeitConfirm: false,//是否确认服务器删除
initNewRow: true,//是否加载时新增行
endEditing: function (editIndex, save) { }, //结束编辑回调函数
endEdited: function () { },//保存成功回调方法
endEditingCofrim: false,//结束编辑前是否确认, 外部方法根据情况调用保存方法
isDelColumn: true,//是否新增【删除】操作列
DelColumnWidth: 50,//删除列宽度
loadEnd: function (appendRow) { },//datagrid初始化完执行的方法
isSaveAddRow: true//保存时是否自动新增行
};
options = $.extend(defaults, options || {});
var datagridAction = {
datagrid: null,
editIndex: undefined,
endEdit: function () {
datagridAction.datagrid.datagrid('endEdit', datagridAction.editIndex);
datagridAction.editIndex = undefined;
options.endEdited();
if (isEmptyRow(datagridAction.datagrid) && options.isSaveAddRow) {//判断是否存在空行 不存在就新增一行
datagridAction.append();
}
},
deleteRow: function () {
if (datagridAction.editIndex == undefined) { return; }
datagridAction.datagrid.datagrid('cancelEdit', datagridAction.editIndex).datagrid('deleteRow', datagridAction.editIndex);
datagridAction.editIndex = undefined;
},
endEditing: function () {