easyui数据表格DataGrid插件
<div class="dg2" style="width:1200px;height:300px;margin:10px auto;">
<table id="dglist2" ></table>
<div class="btn_tool2" style="padding:5px;height:auto">
<a href="javascript:void(0)" id="listAdd" class=" easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">添加公司设备</a>
<a href="javascript:void(0)" id="listUadd" class=" easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">添加用户设备</a>
<a href="javascript:void(0)" class="del easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">删除</a>
<a href="javascript:void(0)" class="save easyui-linkbutton" data-options="iconCls:'icon-save',plain:true">保存</a>
<a style="display:none;" href="javascript:void(0)" class="cancel easyui-linkbutton"
data-options="iconCls:'icon-undo',plain:true">取消</a>
<!--<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" onclick="getChanges()">GetChanges</a>-->
</div>
</div> $("#dglist2").gridsub({
title: '设备',
width: 1200,
key: "id",
rownumbers: false,
singleSelect: true,
toolbar: ".btn_tool2",
pagination: false,
columns: [[
{ field: 'deviceId', checkbox: true, hidden: true },
{
field: 'deviceName', title: '设备名称 ', width: '14%', align: 'center', sortable: false, editor: {
type: 'combobox',
options: {
valueField: 'id',
textField: 'text',
method: 'get',
url: 'system/dic/getDicByCode/installdevName'
}
},formatter:function (value,row,index) {
return $Core.DicCache.get("installdevName")[value];
}
},
{
field: 'company', title: '单位', width: '11%', align: 'center', sortable: false,editor:{type:'textbox',options:{required: true, validType: '' }}
},
{
field: 'number', title: '数量', width: '11%', align: 'center', sortable: false, editor: { type: 'numberbox', options: { required: true, validType: 'numeric' } }
},
{ field: 'installMoney', title: '安装费用', width: '11%', align: 'center', sortable: false, editor: { type: 'numberbox', options: { required: true, validType: 'numeric' } } },
{ field: 'total', title: '合计', width: '11%', align: 'center', sortable: false, editor: { type: 'numberbox', options: { required: true, validType: 'numeric' } } },
]],
// data: [],
});
var flag = true;
//物资列表
$("#listAdd").bind("click", function() {
debugger;
if(flag){
debugger;
$("#listAdd").gridselect({
title:'设备信息',
dialogWidth: '600', //窗口宽度 默认值600
dialogHeight: "400",//窗口高度 默认值 70%
searchFields: [ //搜索条件
{
name: "deviceName", //separator 指定后会换行显示
text: "设备名称",
type: "combobox", //控件类型 只支持 简单的表单控件 textbox my97 combobox 等简单控件 如果条件过多 可以增加 separator 换行显示
url: "system/dic/getDicByCode/installdevName", //字典获取路径
width: '', //宽度
querytype: "eq",
//hidden: true, //是否隐藏域 默认否
value: '' //默认值
},
{
name: "stockDeviceState", //separator 指定后会换行显示
text: "状态",
type: "textbox", //控件类型 只支持 简单的表单控件 textbox my97 combobox 等简单控件 如果条件过多 可以增加 separator 换行显示
//url: "system/dic/getDicByCode/material_type", //字典获取路径
width: '', //宽度
querytype: "like",
hidden: true, //是否隐藏域 默认否
value: "1" //默认值
}
],
dgOpts: { //datagrid 参数
url: 'security/devicestock/query',
/* queryParams: {
qqq : '[{"name":"gfy","value":"'+$("#gfyId").val()+'","type":"like"}]',
d:'fff'
},*/
/*onBeforeLoad:function(paras){
paras.querystra +="&id="+$("#gfyId").val();
},*/
columns: [[
{field:'deviceName',title:'设备名称',align:'center',width:200,formatter:function (value,row,index) {
return $Core.DicCache.get("installdevName")[value];
}},
{field:'deviceNumber',title:'设备编号',align:'center',width:200},
{field:'assetNumber',title:'资产编号',align:'center',width:200},
{field:'updateTime',title:'更新时间',align:'center',width:200},
{field:'stockState',title:'库存状态',align:'center',width:200,formatter:function(value,row,index) {
return $Core.DicCache.get("stockState")[value];
}}
]]
},
//选择一行时 被调用 return false 不会关掉窗口
onSelect: function (index, row) {
debugger;
var newRow = {};
newRow.deviceId = row.stockId;
newRow.deviceName = row.deviceName;
newRow.assetsNumber = row.assetNumber;
newRow.deviceNumber = row.deviceNumber;
newRow.deviceSpec = row.standardModel;
newRow.propertyAscription = "1";
newRow.company = "";
var stockId = row.stockId;
var isAppend = true;
$.each($("#dglist2").datagrid("getRows"), function (j,k) {
if (k.deviceId==stockId) {
isAppend = false;
}
});
if (isAppend) {
$("#dglist2").datagrid("appendRow", newRow);
}
return false;},
onClear: function () { //点击清空按钮时被调用
}
});
flag = false;
}
$("#listAdd").gridselect("show");
});(function ($) {
debugger;
function init(target) {
debugger;
var t = $(target),
state = $.data(target, 'gridsub'),
key = state.options.key;
var editIndex = undefined;
function endEditing() {
if (editIndex == undefined) { return true }
if (t.datagrid('validateRow', editIndex)) {
var ed = t.datagrid('getEditor', { index: editIndex, field: key });
t.datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
return false;
}
}
t.datagrid({
title: state.options.title,
width: state.options.width,
onClickRow: function (index) {
if (endEditing()) {
t.datagrid('selectRow', index)
.datagrid('beginEdit', index);
editIndex = index;
} else {
t.datagrid('selectRow', editIndex);
}
},
rownumbers: state.options.rownumbers,
singleSelect: state.options.singleSelect,
toolbar: state.options.toolbar,
pagination: state.options.pagination,
columns: state.options.columns,
data: state.options.data,
});
$(state.options.toolbar).find("a.add").on("click", function (e) {
if (endEditing()) {
t.datagrid('appendRow', {});
editIndex = t.datagrid('getRows').length - 1;
t.datagrid('selectRow', editIndex).datagrid('beginEdit', editIndex);
}
});
$(state.options.toolbar).find("a.save").on("click", function (e) {
if (t.datagrid('validateRow', editIndex)) {
var ed = t.datagrid('getEditor', { index: editIndex, field: key });
t.datagrid('endEdit', editIndex);
t.datagrid('acceptChanges');
var rows = t.datagrid('getSelected');
t.datagrid("updateRow", rows);
}
});
$(state.options.toolbar).find("a.del").on("click", function (e) {
var rows = t.datagrid('getSelected');
var editIndex = t.datagrid("getRowIndex", rows);
if (!rows) {
$Core.UI.message.warning("请选择一条数据"); return false;
}
t.datagrid('cancelEdit', editIndex).datagrid('deleteRow', editIndex);
editIndex = undefined;
});
$(state.options.toolbar).find("a.cancel").on("click", function (e) {
var row = t.datagrid('getSelected');
t.datagrid('endEdit', editIndex)
// if (!state.options.key) {
// t.datagrid('deleteRow', editIndex);
// }
editIndex = undefined;
});
}
// 插件的定义
$.fn.gridsub = function (options, param) {
debugger;
if (typeof options == 'string') {
var method = $.fn.gridsub.methods[options];
if (method) {
return method(this, param);
}
}
return this.each(function () {
debugger;
var state = $.data(this, "gridsub");
if (state) {
$.extend(state.options, options);
} else {
$.data(this, "gridsub",
{
options: $.extend(true, {}, $.fn.gridsub.defaults, options)
});
}
init(this);
});
};
$.fn.gridsub.methods = {
getRows: function (jq) {
return $(jq[0]).datagrid("getRows");
},
load: function (jq, value) {
return $(jq[0]).datagrid({ data: value });
}
};
// 插件的defaults
$.fn.gridsub.defaults = {
title: '',
width: 300,
//onClickRow: state.onClickRow,
rownumbers: false,
singleSelect: false,
// toolbar: state.toolbar,
pagination: false,
columns: [],
data: [],
};
// 闭包结束
})(jQuery);