1 js
/** * sharedatagrid - jQuery EasyUI * * Licensed under the GPL: * http://www.gnu.org/licenses/gpl.txt * * Copyright 2011 stworthy [ stworthy@gmail.com ] * * Dependencies: * datagrid * 基于edatagrid的扩展 * API 如下： $('#dg_FixedAssetsGeneral').sharedatagrid('getChanges');//获取所有更改的数据 $('#dg_FixedAssetsGeneral').sharedatagrid('addRow');//添加行 $('#dg_FixedAssetsGeneral').sharedatagrid('saveRow');//保存行 $('#dg_FixedAssetsGeneral').sharedatagrid('cancelRow');//取消编辑 $('#dg_FixedAssetsGeneral').sharedatagrid('destroyRow');//删除行 $('#dg_FixedAssetsGeneral').sharedatagrid('showHidecolumns')//;显示隐藏列 * 使用方法： <div class="showcolumnTools"></div> <table id="dg" style="width:600px;height:200px" singleSelect="true"> </table> $('#dg_FixedAssetsGeneral').sharedatagrid({ columns: [[ { field: 'itemid', title: '编码', width: 100, editor: "{type:'validatebox',options:{required:true}}" }, { field: 'productid', title: '名称', width: 100, align: 'right', halign: 'center', editor: 'text' }, { field: 'listprice', title: '产地', width: 100, align: 'right', halign: 'center', editor: { type: 'numberbox', options: { precision: 2}} }, { field: 'unitcost', title: '规格', width: 100, align: 'right', halign: 'center', editor: 'text' }, { field: 'attr1', title: '型号', width: 100, align: 'right', halign: 'center', editor: 'text' }, { field: 'operation', title: '操作', width: 80, align: 'center', halign: 'center', formatter: addOperationRow } ]], hidecolumns: [ ['itemid', 'productid', 'listprice','attr1'], ['编码', '名称', '产地','型号']]//隐藏列配置 }); $('#dg_FixedAssetsGeneral').sharedatagrid('showHidecolumns'); //显示隐藏列 */ (function ($) { var currTarget; $(function () { $(document).unbind('.sharedatagrid').bind('mousedown.sharedatagrid', function (e) { var p = $(e.target).closest('div.datagrid-view,div.combo-panel'); if (p.length) { if (p.hasClass('datagrid-view')) { var dg = p.children('table'); if (dg.length && currTarget != dg[0]) { _save(); } } return; } _save(); function _save() { var dg = $(currTarget); if (dg.length) { dg.sharedatagrid('saveRow'); currTarget = undefined; } } }); }); function buildGrid(target) { var opts = $.data(target, 'sharedatagrid').options; $(target).datagrid($.extend({}, opts, { onDblClickCell: function (index, field) { if (opts.editing) { $(this).sharedatagrid('editRow', index); console.log("onDblClickCell"); focusEditor(field); } }, onClickCell: function (index, field) { if (opts.editing && opts.editIndex >= 0) { $(this).sharedatagrid('editRow', index); console.log(field); focusEditor(field); } }, onAfterEdit: function (index, row) { opts.editIndex = -1; var url = row.isNewRecord ? opts.saveUrl : opts.updateUrl; if (url) { $.post(url, row, function (data) { if (data.isError) { $(target).sharedatagrid('cancelRow', index); $(target).sharedatagrid('selectRow', index); $(target).sharedatagrid('editRow', index); opts.onError.call(target, index, data); return; } data.isNewRecord = null; $(target).datagrid('updateRow', { index: index, row: data }); if (opts.tree) { var idValue = row[opts.idField || 'id']; var t = $(opts.tree); var node = t.tree('find', idValue); if (node) { node.text = row[opts.treeTextField]; t.tree('update', node); } else { var pnode = t.tree('find', row[opts.treeParentField]); t.tree('append', { parent: (pnode ? pnode.target : null), data: [{ id: idValue, text: row[opts.treeTextField]}] }); } } opts.onSave.call(target, index, row); }, 'json'); } else { opts.onSave.call(target, index, row); } if (opts.onAfterEdit) opts.onAfterEdit.call(target, index, row); }, onCancelEdit: function (index, row) { opts.editIndex = -1; if (row.isNewRecord) { $(this).datagrid('deleteRow', index); } if (opts.onCancelEdit) opts.onCancelEdit.call(target, index, row); }, onBeforeLoad: function (param) { if (opts.onBeforeLoad.call(target, param) == false) { return false } // $(this).datagrid('rejectChanges'); $(this).sharedatagrid('cancelRow'); if (opts.tree) { var node = $(opts.tree).tree('getSelected'); param[opts.treeParentField] = node ? node.id : undefined; } } })); function focusEditor(field) { var editor = $(target).datagrid('getEditor', { index: opts.editIndex, field: field }); if (editor) { editor.target.focus(); } else { var editors = $(target).datagrid('getEditors', opts.editIndex); if (editors.length) { editors[0].target.focus(); } } } if (opts.tree) { $(opts.tree).tree({ url: opts.treeUrl, onClick: function (node) { $(target).datagrid('load'); }, onDrop: function (dest, source, point) { var targetId = $(this).tree('getNode', dest).id; $.ajax({ url: opts.treeDndUrl, type: 'post', data: { id: source.id, targetId: targetId, point: point }, dataType: 'json', success: function () { $(target).datagrid('load'); } }); } }); } } $.fn.sharedatagrid = function (options, param) { if (typeof options == 'string') { var method = $.fn.sharedatagrid.methods[options]; if (method) { return method(this, param); } else { return this.datagrid(options, param); } } options = options || {}; return this.each(function () { var state = $.data(this, 'sharedatagrid'); if (state) { $.extend(state.options, options); } else { $.data(this, 'sharedatagrid', { options: $.extend({}, $.fn.sharedatagrid.defaults, $.fn.sharedatagrid.parseOptions(this), options) }); } buildGrid(this); }); }; $.fn.sharedatagrid.parseOptions = function (target) { return $.extend({}, $.fn.datagrid.parseOptions(target), { }); }; $.fn.sharedatagrid.methods = { options: function (jq) { var opts = $.data(jq[0], 'sharedatagrid').options; return opts; }, //列显示隐藏逻辑 showHidecolumns: function (jq) { //初次加载就把含税和大单位隐藏 $("#dg_FixedAssetsGeneral").datagrid('hideColumn', 'tb_ddw_hs'); //大单价（含税） $("#dg_FixedAssetsGeneral").datagrid('hideColumn', 'tb_shuilv'); //税率 $("#dg_FixedAssetsGeneral").datagrid('hideColumn', 'tb_shuie'); //税额 $("#dg_FixedAssetsGeneral").datagrid('hideColumn', 'tb_dj_hs'); //单价（含税） $("#dg_FixedAssetsGeneral").datagrid('hideColumn', 'tb_je_hs'); //金额（含税） $("#dg_FixedAssetsGeneral").datagrid('hideColumn', 'tb_ddw_ws'); //大单价（未税） $("#dg_FixedAssetsGeneral").datagrid('hideColumn', 'tb_ddw'); //大单位 $("#dg_FixedAssetsGeneral").datagrid('showColumn', 'tb_xdw'); //小单位 $("#dg_FixedAssetsGeneral").datagrid('showColumn', 'tb_dj_ws'); //单价（未税） $("#dg_FixedAssetsGeneral").datagrid('showColumn', 'tb_je_ws'); //金额（未税） var opts = $.data(jq[0], 'sharedatagrid').options; var dg = $(jq[0]); //获取到当前表格 var arr = opts.hidecolumns; //隐藏列 //勾选隐藏逻辑啊a[0]:表示编号，a[1]:表示名称 for (i = 0; i < arr[0].length; i++) { $(".showcolumnTools").append('<input type="checkbox" id="' + arr[0][i] + '" /><label>' + arr[1][i] + '</label>'); //添加check元素 dg.datagrid('hideColumn', arr[0][i]); //初次加载先隐藏 //$(".showcolumnTools").append('<input type="checkbox" id="' + arr[0][i] + '" /><label>显示' + arr[1][i] + '</label>'); $("#" + arr[0][i]).click(function () { var self=$(this); var id = self.attr('id'); console.log(id); if (id == 'yongdadanwei' || id == 'hanshui') {//含税，用大单位，特殊逻辑 var ddw_self=$("#yongdadanwei");//大单位check对象 var hs_self=$("#hanshui");//含税check对象 //大单位:tb_ddw,小单位:tb_xdw ,大单位（含税）:tb_ddw_hs ,大单位（未税）:tb_ddw_ws //金额（含税）：tb_jehs ,金额（未税）:tb_je_ws ，tb_shuilv tb_shuie if (hs_self.is(':checked') == true) { //含税+大单位 if(ddw_self.is(':checked') == true){ //用大单位+含税（显示：大单位（含税），税率，税额；隐藏：小单位，单价（未税），金额（未税）） $("#dg_FixedAssetsGeneral").datagrid('showColumn', 'tb_ddw_hs');//大单价（含税） $("#dg_FixedAssetsGeneral").datagrid('showColumn', 'tb_shuilv');//税率 $("#dg_FixedAssetsGeneral").datagrid('showColumn', 'tb_shuie');//税额 $("#dg_FixedAssetsGeneral").datagrid('hideColumn', 'tb_dj_hs'); //单价（含税） $("#dg_FixedAssetsGeneral").datagrid('showColumn', 'tb_je_hs'); //金额（含税） $("#dg_FixedAssetsGeneral").datagrid('hideColumn', 'tb_ddw_ws'); //大单价（未税） $("#dg_FixedAssetsGeneral").datagrid('showColumn', 'tb_ddw');//大单位 $("#dg_FixedAssetsGeneral").datagrid('hideColumn', 'tb_xdw');//小单位 $("#dg_FixedAssetsGeneral").datagrid('hideColumn', 'tb_dj_ws');//单价（未税） $("#dg_FixedAssetsGeneral").datagrid('hideColumn', 'tb_je_ws');//金额（未税） }else{//含税+小单位 $("#dg_FixedAssetsGeneral").datagrid('hideColumn', 'tb_ddw_hs'); //大单价（含税） $("#dg_FixedAssetsGeneral").datagrid('showColumn', 'tb_shuilv');//税率 $("#dg_FixedAssetsGeneral").datagrid('showColumn', 'tb_shuie');//税额 $("#dg_FixedAssetsGeneral").datagrid('showColumn', 'tb_dj_hs'); //单价（含税） $("#dg_FixedAssetsGeneral").datagrid('showColumn', 'tb_je_hs'); //金额（含税） $("#dg_FixedAssetsGeneral").datagrid('hideColumn', 'tb_ddw_ws'); //大单价（未税） $("#dg_FixedAssetsGeneral").datagrid('hideColumn', 'tb_ddw');//大单位 $("#dg_FixedAssetsGeneral").datagrid('showColumn', 'tb_xdw');//小单位 $("#dg_FixedAssetsGeneral").datagrid('hideColumn', 'tb_dj_ws');//单价（未税） $("#dg_FixedAssetsGeneral").datagrid('hideColumn', 'tb_je_ws');//金额（未税） } } else {//不含税+大单位 if (ddw_self.is(':checked') == true) { $("#dg_FixedAssetsGeneral").datagrid('hideColumn', 'tb_ddw_hs');//大单价（含税） $("#dg_FixedAssetsGeneral").datagrid('hideColumn', 'tb_shuilv');//税率 $("#dg_FixedAssetsGeneral").datagrid('hideColumn', 'tb_shuie');//税额 $("#dg_FixedAssetsGeneral").datagrid('hideColumn', 'tb_dj_hs'); //单价（含税） $("#dg_FixedAssetsGeneral").datagrid('hideColumn', 'tb_je_hs'); //金额（含税） $("#dg_FixedAssetsGeneral").datagrid('showColumn', 'tb_ddw_ws'); //大单价（未税） $("#dg_FixedAssetsGeneral").datagrid('showColumn', 'tb_ddw');//大单位 $("#dg_FixedAssetsGeneral").datagrid('hideColumn', 'tb_xdw');//小单位 $("#dg_FixedAssetsGeneral").datagrid('showColumn', 'tb_dj_ws');//单价（未税） $("#dg_FixedAssetsGeneral").datagrid('showColumn', 'tb_je_ws');//金额（未税） } else {//不含税+小单位 $("#dg_FixedAssetsGeneral").datagrid('hideColumn', 'tb_ddw_hs');//大单价（含税） $("#dg_FixedAssetsGeneral").datagrid('hideColumn', 'tb_shuilv');//税率 $("#dg_FixedAssetsGeneral").datagrid('hideColumn', 'tb_shuie');//税额 $("#dg_FixedAssetsGeneral").datagrid('hideColumn', 'tb_dj_hs'); //单价（含税） $("#dg_FixedAssetsGeneral").datagrid('hideColumn', 'tb_je_hs'); //金额（含税） $("#dg_FixedAssetsGeneral").datagrid('hideColumn', 'tb_ddw_ws'); //大单价（未税） $("#dg_FixedAssetsGeneral").datagrid('hideColumn', 'tb_ddw');//大单位 $("#dg_FixedAssetsGeneral").datagrid('showColumn', 'tb_xdw');//小单位 $("#dg_FixedAssetsGeneral").datagrid('showColumn', 'tb_dj_ws');//单价（未税） $("#dg_FixedAssetsGeneral").datagrid('showColumn', 'tb_je_ws');//金额（未税） } } }else { self.is(':checked') == true ? $("#dg_FixedAssetsGeneral").datagrid('showColumn', id) : $("#dg_FixedAssetsGeneral").datagrid('hideColumn', id); } }); } }, enableEditing: function (jq) { return jq.each(function () { var opts = $.data(this, 'sharedatagrid').options; opts.editing = true; }); }, disableEditing: function (jq) { return jq.each(function () { var opts = $.data(this, 'sharedatagrid').options; opts.editing = false; }); }, editRow: function (jq, index) { return jq.each(function () { var dg = $(this); var opts = $.data(this, 'sharedatagrid').options; var editIndex = opts.editIndex; if (editIndex != index) { if (dg.datagrid('validateRow', editIndex)) { if (editIndex >= 0) { if (opts.onBeforeSave.call(this, editIndex) == false) { setTimeout(function () { dg.datagrid('selectRow', editIndex); }, 0); return; } } dg.datagrid('endEdit', editIndex); dg.datagrid('beginEdit', index); opts.editIndex = index; if (currTarget != this && $(currTarget).length) { $(currTarget).sharedatagrid('saveRow'); currTarget = undefined; } if (opts.autoSave) { currTarget = this; } var rows = dg.datagrid('getRows'); opts.onEdit.call(this, index, rows[index]); } else { setTimeout(function () { dg.datagrid('selectRow', editIndex); }, 0); } } }); }, addRow: function (jq, index) { return jq.each(function () { var dg = $(this); //table 对象 //console.log(index); var opts = $.data(this, 'sharedatagrid').options; if (opts.editIndex >= 0) { if (!dg.datagrid('validateRow', opts.editIndex)) { dg.datagrid('selectRow', opts.editIndex); return; } if (opts.onBeforeSave.call(this, opts.editIndex) == false) { setTimeout(function () { dg.datagrid('selectRow', opts.editIndex); }, 0); return; } dg.datagrid('endEdit', opts.editIndex); } var rows = dg.datagrid('getRows'); //获取所有行存为数组 //console.log(rows); function _add(index, row) { console.log(row); if (index == undefined) { dg.datagrid('appendRow', row); opts.editIndex = rows.length - 1; //更新总记录数 } else { dg.datagrid('insertRow', { index: index, row: row }); opts.editIndex = index; } } if (typeof index == 'object') { _add(index.index, $.extend(index.row, { isNewRecord: true })) } else { _add(index, { isNewRecord: true }); } // if (index == undefined){ // dg.datagrid('appendRow', {isNewRecord:true}); // opts.editIndex = rows.length - 1; // } else { // dg.datagrid('insertRow', { // index: index, // row: {isNewRecord:true} // }); // opts.editIndex = index; // } // dg.datagrid('beginEdit', opts.editIndex); // dg.datagrid('selectRow', opts.editIndex); if (opts.tree) { var node = $(opts.tree).tree('getSelected'); rows[opts.editIndex][opts.treeParentField] = (node ? node.id : 0); } opts.onAdd.call(this, opts.editIndex, rows[opts.editIndex]); }); }, saveRow: function (jq) { return jq.each(function () { var dg = $(this); var opts = $.data(this, 'sharedatagrid').options; if (opts.editIndex >= 0) { if (opts.onBeforeSave.call(this, opts.editIndex) == false) { setTimeout(function () { dg.datagrid('selectRow', opts.editIndex); }, 0); return; } $(this).datagrid('endEdit', opts.editIndex); } }); }, cancelRow: function (jq) { return jq.each(function () { var opts = $.data(this, 'sharedatagrid').options; if (opts.editIndex >= 0) { $(this).datagrid('cancelEdit', opts.editIndex); } }); }, destroyRow: function (jq, index) { return jq.each(function () { var dg = $(this); var opts = $.data(this, 'sharedatagrid').options; var rows = []; if (index == undefined) { rows = dg.datagrid('getSelections'); } else { var rowIndexes = $.isArray(index) ? index : [index]; for (var i = 0; i < rowIndexes.length; i++) { var row = opts.finder.getRow(this, rowIndexes[i]); if (row) { rows.push(row); } } } if (!rows.length) { $.messager.show({ title: opts.destroyMsg.norecord.title, msg: opts.destroyMsg.norecord.msg }); return; } $.messager.confirm(opts.destroyMsg.confirm.title, opts.destroyMsg.confirm.msg, function (r) { if (r) { for (var i = 0; i < rows.length; i++) { _del(rows[i]); } dg.datagrid('clearSelections'); } }); function _del(row) { var index = dg.datagrid('getRowIndex', row); if (index == -1) { return } if (row.isNewRecord) { dg.datagrid('cancelEdit', index); } else { if (opts.destroyUrl) { var idValue = row[opts.idField || 'id']; $.post(opts.destroyUrl, { id: idValue }, function (data) { var index = dg.datagrid('getRowIndex', idValue); if (data.isError) { dg.datagrid('selectRow', index); opts.onError.call(dg[0], index, data); return; } if (opts.tree) { dg.datagrid('reload'); var t = $(opts.tree); var node = t.tree('find', idValue); if (node) { t.tree('remove', node.target); } } else { dg.datagrid('cancelEdit', index); dg.datagrid('deleteRow', index); } opts.onDestroy.call(dg[0], index, row); }, 'json'); } else { dg.datagrid('cancelEdit', index); dg.datagrid('deleteRow', index); opts.onDestroy.call(dg[0], index, row); } } } }); } }; $.fn.sharedatagrid.defaults = $.extend({}, $.fn.datagrid.defaults, { editing: true, editIndex: -1, destroyMsg: { norecord: { title: 'Warning', msg: 'No record is selected.' }, confirm: { title: 'Confirm', msg: 'Are you sure you want to delete?' } }, // destroyConfirmTitle: 'Confirm', // destroyConfirmMsg: 'Are you sure you want to delete?', autoSave: false, // auto save the editing row when click out of datagrid url: null, // return the datagrid data saveUrl: null, // return the added row updateUrl: null, // return the updated row destroyUrl: null, // return {success:true} tree: null, // the tree selector treeUrl: null, // return tree data treeDndUrl: null, // to process the drag and drop operation, return {success:true} treeTextField: 'name', treeParentField: 'parentId', hidecolumns: [], //隐藏列 onAdd: function (index, row) { }, onEdit: function (index, row) { }, onBeforeSave: function (index) { }, onSave: function (index, row) { }, onDestroy: function (index, row) { }, onError: function (index, row) { } }); })(jQuery);
2 用户控件
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="UserControl_bill_Detial_WebUserControl" %> <link rel="stylesheet" type="text/css" href="../../Css/themes/default/easyui.css" /> <link rel="stylesheet" type="text/css" href="../../Css/themes/icon.css" /> <script type="text/javascript" src="../../Js/hdj_default/jquery-3.0.0.js"></script> <script type="text/javascript" src="../../Js/hdj_default/jquery.easyui.min.js"></script> <script type="text/javascript" src="../../js/hdj_default/easyui-lang-zh_CN.js"></script> <script src="/UserControl/bill_Detial/shareDatagrid.js" type="text/javascript"></script> <script type="text/javascript" src="/Js/hdj_default/shareWindow.js"></script> <%--<div tyle="margin-bottom:10px"> <a href="#" οnclick="javascript:getDatagridChangs()">获取更新的数据</a> <a href="#" οnclick="javascript:$('#dg_FixedAssetsGeneral').sharedatagrid('addRow')"> AddRow</a> <a href="#" οnclick="javascript:$('#dg_FixedAssetsGeneral').sharedatagrid('saveRow')"> SaveRow</a> <a href="#" οnclick="javascript:$('#dg_FixedAssetsGeneral').sharedatagrid('cancelRow')"> CancelRow</a> <a href="#" οnclick="javascript:$('#dg_FixedAssetsGeneral').sharedatagrid('destroyRow')"> destroyRow</a> </div>--%> <%-- 复选框div class="showcolumnTools" --%> <div class="showcolumnTools"> </div> <div class="content" style="width: 90%;"> <table id="dg_FixedAssetsGeneral" singleselect="true"> </table> <input id="txtTableValue" runat="server" type="hidden" /> <input id="txtGoodsNum" title="物资编号" runat="server" type="hidden" /> </div> <script type="text/javascript"> //{Goods_Code:"",Goods_name:"",Goods_Aear:"",tb_guige:"",tb_Type:"",tb_sjkc:"",tb_ddw:"",tb_xdw:"",tb_Number:0,tb_ddw_hs:"",tb_ddw_ws:"",tb_jehs:"",tb_je_ws:"",tb_shuilv:"",tb_shuie:"",tb_zhekou:"",tb_zkje:"",tb_jsje:"",tb_beizhu:""} $(function () { //数据网格加载 $('#dg_FixedAssetsGeneral').sharedatagrid({ columns: [[ { field: 'Goods_Code', title: '编码', width: 80, align: 'right', halign: 'center', editor: 'text' }, { field: 'Goods_Name', title: '名称', width: 150, align: 'right', halign: 'center', editor: 'text' }, { field: 'Goods_Aear', title: '产地', width: 80, align: 'right', halign: 'center', editor: { type: 'numberbox', options: { precision: 2}} }, { field: 'tb_guige', title: '规格', width: 60, align: 'right', halign: 'center', editor: 'text' }, { field: 'tb_Type', title: '型号', width: 60, align: 'right', halign: 'center', editor: 'text' }, { field: 'tb_sjkc', title: '实际库存', width: 80, align: 'right', halign: 'center', editor: 'text' }, { field: 'tb_ddw', title: '大单位', width: 50, align: 'right', halign: 'center', editor: 'text' }, { field: 'tb_xdw', title: '小单位', width: 50, align: 'right', halign: 'center', editor: 'text' }, { field: 'tb_Number', title: '数量', width: 50, align: 'right', halign: 'center', editor: 'text' }, { field: 'tb_dj_ws', title: '单价(未税)', width: 80, align: 'right', halign: 'center', editor: 'text' }, { field: 'tb_dj_hs', title: '单价(含税)', width: 80, align: 'right', halign: 'center', editor: 'text' }, { field: 'tb_ddw_hs', title: '大单价(含税)', width: 100, align: 'right', halign: 'center', editor: { type: 'numberbox', options: { precision: 2}} }, { field: 'tb_ddw_ws', title: '大单价(未税)', width: 100, align: 'right', halign: 'center', editor: { type: 'numberbox', options: { precision: 2}} }, { field: 'tb_je_hs', title: '金额(含税)', width: 80, align: 'right', halign: 'center', editor: 'text' }, { field: 'tb_je_ws', title: '金额(未税)', width: 80, align: 'right', halign: 'center', editor: 'text' }, { field: 'tb_shuilv', title: '税率', width: 50, align: 'right', halign: 'center', editor: { type: 'numberbox', options: { precision: 2}} }, { field: 'tb_shuie', title: '税额', width: 50, align: 'right', halign: 'center', editor: 'text' }, { field: 'tb_zhekou', title: '折扣', width: 50, align: 'right', halign: 'center', editor: 'text' }, { field: 'tb_zkje', title: '折扣金额', width: 80, align: 'right', halign: 'center', editor: 'text' }, { field: 'tb_jsje', title: '结算金额', width: 80, align: 'right', halign: 'center', editor: { type: 'numberbox', options: { precision: 2}} }, { field: 'tb_beizhu', title: '备注', width: 120, align: 'right', halign: 'center', editor: 'text' }, { field: 'operation', title: '操作', width: 60, align: 'center', halign: 'center', formatter: addOperationRow }, { field: 'yongdadanwei', title: '用大单位',hide:true}, { field: 'hanshui', title: '含税',hide:true} ]], showFooter: true, //尾行显示 onLoadSuccess: function (data) { var length = $('#dg_FixedAssetsGeneral').datagrid('getRows').length; for (var i = 0; i < 6 - length; i++) { addRow2();//添加空白行 } formatMoney(); }, fixed:true, //fitColumns:true, rownumbers: true, hidecolumns: [ ['tb_guige', 'tb_Type','Goods_Aear','tb_beizhu','yongdadanwei','hanshui'], ['显示规格', '显示型号','显示产地','显示备注','用大单位','含税']]//隐藏列配置 }); $('#dg_FixedAssetsGeneral').sharedatagrid('showHidecolumns'); //显示隐藏列 //数据网格编辑 $('#dg_FixedAssetsGeneral').datagrid({ onClickCell: function (index, field, value) { //每个文本框都可以编辑 myonClickCell(index, field); }, }); //自动求and格式化（求和列：tb_je_hs，tb_je_ws，tb_Number,tb_sjkc） function formatMoney() { var rows = $('#dg_FixedAssetsGeneral').datagrid('getRows'); var tb_je_hs_total = 0; var tb_je_ws_total = 0; var tb_Number_total = 0; var tb_sjkc_total = 0; for (var i = 0; i < rows.length; i++) { tb_je_hs_total += isNaN(parseFloat(rows[i]["tb_je_hs"]))? 0 : parseFloat(rows[i]["tb_je_hs"]); tb_je_ws_total += isNaN(parseFloat(rows[i]["tb_je_ws"]))? 0 : parseFloat(rows[i]["tb_je_ws"]); tb_Number_total += isNaN(parseFloat(rows[i]["tb_Number"])) ? 0 : parseFloat(rows[i]["tb_Number"]); tb_sjkc_total += isNaN(parseFloat(rows[i]["tb_sjkc"])) ? 0 : parseFloat(rows[i]["tb_sjkc"]); } var footRows = $('#dg_FixedAssetsGeneral').datagrid('getFooterRows'); footRows[0].tb_je_hs = toDecimal2(tb_je_hs_total); footRows[0].tb_je_ws = toDecimal2(tb_je_ws_total); footRows[0].tb_Number = tb_Number_total; footRows[0].tb_sjkc = tb_sjkc_total; $('#dg_FixedAssetsGeneral').datagrid('reloadFooter', footRows); } //制保留2位小数，如：2，会在2后面补上00.即2.00 function toDecimal2(x) { var f = parseFloat(x); if (isNaN(f)) { return 0.00; } var f = Math.round(x * 100) / 100; var s = f.toString(); var rs = s.indexOf('.'); if (rs < 0) { rs = s.length; s += '.'; } while (s.length <= rs + 2) { s += '0'; } return s; } /* 加载测试数据star */ // $.get("/UserControl/bill_Detial/data2.json", function (data) { // var vData = $.parseJSON(data); // console.log(vData); // $('#dg_FixedAssetsGeneral').datagrid('loadData', vData); //将数据绑定到datagrid // }); // /* 加载测试数据end */ var ceshidata = {total:1, rows:[{Goods_Code:"",Goods_Name:"",Goods_Aear:"",tb_guige:"",tb_Type:"",tb_sjkc:"",tb_ddw:"",tb_dj_hs:"",tb_dj_ws:"",tb_xdw:"",tb_Number:"",tb_ddw_hs:"",tb_ddw_ws:"",tb_je_hs:"",tb_je_ws:"",tb_shuilv:"",tb_shuie:"",tb_zhekou:"",tb_zkje:"",tb_jsje:"",tb_beizhu:""}], footer: [{Goods_Name: "总计",tb_Number: "",id: "-1"}] }; setTimeout(function () { $('#dg_FixedAssetsGeneral').datagrid('loadData', ceshidata)} ,100); //将数据绑定到datagrid //添加空白行 function addRow2() { $('#dg_FixedAssetsGeneral').datagrid('appendRow',{Goods_Code:"",Goods_Name:"",Goods_Aear:"",tb_guige:"",tb_Type:"",tb_sjkc:"",tb_ddw:"",tb_xdw:"",tb_Number:"",tb_ddw_hs:"",tb_ddw_ws:"",tb_jehs:"",tb_je_ws:"",tb_shuilv:"",tb_shuie:"",tb_zhekou:"",tb_zkje:"",tb_jsje:"",tb_beizhu:""}); formatMoney(); } //添加数据表格操作列 function addOperationRow(val, row, index) { return '<div style="margin-top:4px"><a href="javascript:void(0);" οnclick="addRow()">' + '<img src="../../Images/hdj_cwgl/add_green.png" width="16px" height="16px" alt="添加" title="添加"/></a> ' + '<a href="javascript:void(0);" οnclick="delRow(' + index + ')">' + '<img src="../../Images/hdj_cwgl/delete_red.png" width="16px" height="16px" alt="删除" title="删除"/></a></div>'; } //下面是单元格编辑方法 $.extend($.fn.datagrid.methods, { editCell: function (jq, param) { //console.log(param["field"]); var ediCol=param["field"];//可编辑的列 Goods_Code Goods_Name tb_Number tb_dj_ws tb_dj_hs tb_ddw_hs tb_ddw_ws tb_zhekou if(ediCol=="Goods_Code"||ediCol=="Goods_Name"||ediCol=="tb_Number"||ediCol=="tb_dj_ws"||ediCol=="tb_dj_hs"||ediCol=="tb_ddw_hs"||ediCol=="tb_ddw_ws"||ediCol=="tb_zhekou"){ // console.log(param){index: 3, field: "tb_zkje"}; 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 varPricePointDigit = 2; //金额小数点位数 var editIndex = undefined; //编辑项-索引 var editField = undefined; //编辑项-字段名 //单机单元格时 function myonClickCell(index, field) { //设置默认小数位值 var money = parseFloat(0).toFixed(0); //单击操作列时 if (field === "operation") return; //单击单元格时 if (endEditing()) { $('#dg_FixedAssetsGeneral').datagrid('editCell', { index: index, field: field }); editIndex = index; editField = field; // $("#aTrue").show(); //绑定编辑单元格金额选中事件 var editors = $('#dg_FixedAssetsGeneral').datagrid('getEditors', editIndex); var nowEditor = editors[0]; //console.log(nowEditor); if (nowEditor != undefined) { if (editField === "Goods_Number") { //console.log("datagrid-editable-input"); nowEditor.target[0].select(); $('.datagrid-editable-input,.textbox-text.validatebox-text').focus(function () {//文本框获得焦点的时候，选中 this.select(); //$("#aTrue").show(); }); } else { //console.log(nowEditor.target[0]); nowEditor.target[0].select(); nowEditor.target.click(function () { this.select(); console.log('单击'); }); } //绑定编辑单元格双击事件 if (editField === "Goods_Name" || editField === "Goods_Code") { var editors = $('#dg_FixedAssetsGeneral').datagrid('getEditors', editIndex); var nowEditor = editors[0]; //console.log(nowEditor); $(nowEditor.target).bind('dblclick', function () { //选择人工成本 //判断是人工成本编码,人工成本名称 if (editField === "Goods_Name") { console.log("双击名称"); bandFixedAssetsWindow(); } else if (editField === "Goods_Code") { bandFixedAssetsWindow(); console.log("双击编码"); } }); } //焦点移开 } } } //是否结束编辑 function endEditing() { if(editField === "tb_Number"||editField === "tb_dj_ws") //ColumnCalculation(editIndex,editField);//列自动计算 //设置默认小数位值 var money = parseFloat(0).toFixed(0); if (editIndex == undefined) { return true; } if ($('#dg_FixedAssetsGeneral').datagrid('validateRow', editIndex)) { $('#dg_FixedAssetsGeneral').datagrid('endEdit', editIndex); formatMoney();//自动求和and 格式化 editIndex = undefined; editField = undefined; return true; } else { return false; } } //列自动计算 function ColumnCalculation(index,name){ // console.log(index); // console.log(name); // var rowObj = new Object(); // rowObj.tb_je_ws="11111"; // rowObj.tb_dj_ws="2222"; // $('#dg_FixedAssetsGeneral').datagrid('updateRow',{ // index: index, // row: rowObj // }); // var ed = $('#dg_FixedAssetsGeneral').datagrid('getEditor', {index:index,field:'tb_je_ws'}); } });// end function () /************************************************** ************* 如下是全局方法 ******************* **************************************************/ //获取所有改变的表格数据 var getDatagridChangs = function () { var arr = $('#dg_FixedAssetsGeneral').sharedatagrid('getChanges'); console.log(arr); }; var addRow = function () { $('#dg_FixedAssetsGeneral').sharedatagrid('addRow'); $('#dg_FixedAssetsGeneral').datagrid('cancelEdit'); }; var delRow = function (index) { $('#dg_FixedAssetsGeneral').datagrid('deleteRow', index); }; </script>
3 json数据
{"total":"4","rows":[
{"Goods_Code":"","Goods_Name":"","Goods_Aear":"","tb_guige":"","tb_Type":"","tb_sjkc":"","tb_ddw":"","tb_dj_hs":"","tb_dj_ws":"","tb_xdw":"","tb_Number":"","tb_ddw_hs":"","tb_ddw_ws":"","tb_je_hs":"","tb_je_ws":"","tb_shuilv":"","tb_shuie":"","tb_zhekou":"","tb_zkje":"","tb_jsje":"","tb_beizhu":""}
],
"footer": [
{
"Goods_Name": "总计",
"tb_Number": "",
"id": "-1"
}
]
}
4 使用
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="StockImport.aspx.cs" Inherits="Bill_StockImport" %> <%@ Register Src="~/UserControl/cwgl_BillHead/BillHead.ascx" TagName="BillHead1" TagPrefix="uc1" %> <%@ Register Src="~/UserControl/bill_Detial/WebUserControl.ascx" TagName="BillDetail" TagPrefix="uc2" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>商品入库</title> <script type="text/javascript" src="../../Js/hdj_default/jquery-3.0.0.js"></script> <script type="text/javascript"> var varPricePointDigit; $(window).resize(function () { domresize(); }); function domresize() { var h = ($(document.body).height() - 47) - $('#div_Top').height(); var div_Top = document.getElementById("div_Top"); div_Top.style.marginTop = h / 2 + "px"; } $(function () { //设置页面高度 var h = ($(document.body).height() - 47) - $('#div_Top').height(); var div_Top = document.getElementById("div_Top"); div_Top.style.marginTop = h / 2 + "px"; $("#txtPayMoney").next("span").find('.textbox-text.validatebox-text').css('text-align', 'right'); //实付金额样式 }); </script> </head> <body> <div id="div_Top" style="width: 100%;height:800px; background-color: White; margin: 0 auto;"> <div style="border: 1px solid #2299EE;"> <input id="datagridValue" runat="server" type="hidden" value=""/> <form style="margin: 0px; padding: 0px;" id="form1" method="post" runat="server"> <table cellpadding="0" cellspacing="0" style="width: 99%; margin: 7px;padding: 0 3px; border: 1px solid #2299EE;"> <%--头部用户控件--%> <tr> <td style="height: 80px;"> <uc1:BillHead1 ID="BillHead1" runat="server" /> </td> </tr> <%-- 中间开窗--%> <tr> <td valign="top" style="line-height: 35px; height: 35px;border-top: solid 1px #c6d6e5;"> <table class="topBar" cellspacing="0" cellpadding="0" border="0"> <tr class="trH"> <td class="tb_th td_Guest" align="right"> 往来单位： </td> <td class="tb_td td_Guest" align="left"> <input id="txtGuestName1" name="txtGuestName1" type="text" style="width: 164px;" class="easyui-textbox easyui-validatebox" data-options="required:true, editable:false, missingMessage:'往来单位不能为空！'" /> <input class="btnSearch" id="btnGuest" οnclick="openGuestWindow();" type="button" /> </td> <td class="tb_th td_Guest" align="right"> 入库仓库： </td> <td class="tb_td td_Guest" align="left"> <input id="txtInStorName" name="txtInStorName" type="text" style="width: 164px;" class="easyui-textbox easyui-validatebox" data-options="required:true, editable:false, missingMessage:'往来单位不能为空！'" /> <input class="btnSearch" id="Button1" οnclick="openInStorWindow();" type="button" /> </td> <td class="ds"> 经 手 人： </td> <td class="dsC"> <input id="txtUser" name="txtUser" type="text" class="easyui-textbox easyui-validatebox" data-options="required:true,editable:false, missingMessage:'经手人不能为空！'" /> <input class="btnSearch" οnclick="openUserWindowJSR();" type="button" /> <input id="txtUserNumber" type="hidden" runat="server" /> </td> </tr> <tr class="trH"> <td class="tb_th td_Guest" align="right"> 部 门： </td> <td class="tb_td td_Guest" align="left"> <input id="txtBranchName" name="txtBranchName" type="text" style="width: 164px;" class="easyui-textbox easyui-validatebox" data-options="required:true, editable:false, missingMessage:'往来单位不能为空！'" /> <input class="btnSearch" id="Button2" οnclick="openBranchWindow();" type="button" /> </td> <td class="tb_th td_Guest" align="right"> 摘 要： </td> <td class="tb_td td_Guest" align="left"> <input id="Text3" name="txtGuestName1" type="text" style="width: 164px;" class="easyui-textbox" data-options=" missingMessage:'摘要！'" /> </td> <td class="ds"> 收款期限： </td> <td class="dsC"> <input id="Text4" name="txtUser" type="text" class="easyui-textbox" data-options=" missingMessage:'收款期限！'" /> </td> </tr> </table> </td> </tr> <%--datagrid数据表格--%> <tr> <td> <uc2:BillDetail ID="BillDetail1" runat="server" /> </td> </tr> <%--//底部功能按钮--%> <tr> <td valign="bottom" style="padding-top: 15px;"> <span style="float: right;"> <select id="ddlType_Shuilv" class="easyui-combobox" data-options="editable : false,panelHeight:80"> <option value="0" selected="selected">选择税率</option> <option value="0.03">普通税率(3%)</option> <option value="0.17">增值税(17%)</option> <option value="0.06">服务税(6%)</option> </select> <a id="buttonLoadDraft" href="javascript:FoldBill();" class="easyui-linkbutton floatRight" data-options="iconCls:'icon-download'">调入草稿</a> <a id="buttonSaveDraft" href="javascript:AddSave(193);"class="easyui-linkbutton floatRight" data-options="iconCls:'icon-save'">存入草稿</a> <asp:Button ID="buttonSave" href="javascript:AddSave(192);" class="easyui-linkbutton floatRight" OnClick="btnsave_Click" OnClientClick="if(ProviderDatagrid()){}else{return false;}" runat="server"/>保存入库 </span><%--//草稿单据号--%> </td> </tr> </table> </form> </div> </div> </body> <script type="text/javascript"> //选择税率后修改表单 $("#ddlType_Shuilv").combobox({ onSelect: function (rec) { console.log(rec.value); var obj = $("#dg_FixedAssetsGeneral").datagrid('getData').rows; } }); //获取表单值 function ProviderDatagrid() { console.log(11); var obj = $("#dg_FixedAssetsGeneral").datagrid('getData').rows; console.log(obj); var str = ""; for (var i = 0; i < obj.length; i++) { for (var j in obj[i]) {//不使用过滤 console.log(j, ":", obj[i][j]); if (obj[i].Goods_Code != "") { str += obj[i][j] + ","; } } str += "|"; } console.log(str); $("#datagridValue").val(str); return true; } //{Goods_Code:"",Goods_name:"",Goods_Aear:"",tb_guige:"",tb_Type:"",tb_sjkc:"",tb_ddw:"",tb_xdw:"",tb_Number:0,tb_ddw_hs:"",tb_ddw_ws:"",tb_jehs:"",tb_je_ws:"",tb_shuilv:"",tb_shuie:"",tb_zhekou:"",tb_zkje:"",tb_jsje:"",tb_beizhu:""} setTimeout(function () { var dg = $("#dg_FixedAssetsGeneral"); var arrHideCol = ['tb_zhekou', 'tb_zkje', 'tb_jsje']; //隐藏折扣，折扣金额，结算金额; for (var i = 0; i < arrHideCol.length; i++) { dg.datagrid('hideColumn', arrHideCol[i]); //列隐藏逻辑 } //单列编辑 dg.datagrid({ onAfterEdit: function (rowIndex, rowData, changes) { //console.log(rowIndex); // console.log(rowData); // console.log(changes); var colname = ""; //操作的单元格key for (var p1 in changes) { colname = p1; } if (colname === "tb_Number") {//修改数目，计算金额 //console.log(changes[colname]); var shumu = changes[colname]; var dj = 10; var rowObj = new Object(); // rowObj.tb_Number = rowData["tb_Number"]; rowObj.tb_dj_ws = dj; rowObj.tb_je_ws = shumu * dj; dg.datagrid('updateRow', { index: rowIndex, row: rowObj }); } } }); }, 100); </script> <script type="text/javascript"> //往来单位 function openGuestWindow() { $.shareWindow({ title: "往来单位", datagridUrl: "../../Public/public_select_window.ashx?type=bandGuestGridView", treeUrl: "../../Public/public_select_window.ashx?type=bandGuestTree", outputType: "1", inputs: ["Gue_code", "Gue_name"], outputs: ["txtGuestNum1", "txtGuestName1"], columns: [[ { field: 'ra', title: '操作', width: 60, align: 'center', formatter: $.shareWindow.prototype.formatRadio }, { field: 'Gue_name', title: '名称', width: 100, align: 'center', sortable: true }, { field: 'Gue_code', title: '编码', width: 80, align: 'center', sortable: true }, { field: 'Ying', title: '往来余款', width: 60, align: 'center', sortable: true }, { field: 'Yu', title: '预存款', width: 60, align: 'center', sortable: true }, { field: 'Qi', title: '其他款', width: 60, align: 'center', sortable: true } ]] }); //将coulum传进去 $.shareWindow.prototype.windowOpen(); } //经手人 function openUserWindowJSR() { $.shareWindow({ title: "经手人", datagridUrl: "../../Public/public_select_window.ashx?type=bandWorkerGridView", treeUrl: "../../Public/public_select_window.ashx?type=bandWorkerTree", // txtName: "txtUser", // txtnumber: "txtUserNumber", outputType: "1", inputs: ["Worker_name", "Worker_number", "Bran_name", "Bran_number"], outputs: ["txtUser", "txtUserNumber", "txtBranchName", "txtBranchNum"], afterSetValues: function (arr) { console.log(123); }, columns: [[ { field: 'Worker_name', title: '名称', width: 100, align: 'center', sortable: true }, { field: 'Worker_number', title: '编码', width: 100, align: 'center', sortable: true }, { field: 'ra', title: '操作', width: 100, align: 'center', formatter: $.shareWindow.prototype.formatRadio } ]] }); //将coulum传进去 $.shareWindow.prototype.windowOpen(); } //部门 function openBranchWindow() { $.shareWindow({ title: "部门", datagridUrl: "../../Public/public_select_window.ashx?type=bandBranchGridView", treeUrl: "../../Public/public_select_window.ashx?type=bandBranchTree", txtName: "txtBranchName", txtnumber: "txtBranchNum", columns: [[ { field: 'Bran_name', title: '部门名称', width: 100, align: 'center', sortable: true }, { field: 'Bran_number', title: '部门编码', width: 100, align: 'center', sortable: true }, { field: 'ra', title: '操作', width: 100, align: 'center', formatter: $.shareWindow.prototype.formatRadio } ]] }); //将coulum传进去 $.shareWindow.prototype.windowOpen(); } //入库仓库的弹出窗 function openInStorWindow() { $.shareWindow({ title: "入库仓库", datagridUrl: "../../Public/public_select_window.ashx?type=bandStorageGridView", treeUrl: "../../Public/public_select_window.ashx?type=bandStorageTree", outputType: "1", inputs: ["Stor_Name", "Stor_Number"], outputs: ["txtInStorName", "txtInStorNum"], columns: [[ { field: 'Stor_Name', title: '名称', width: 100, align: 'center', sortable: true }, { field: 'Stor_Code', title: '编码', width: 100, align: 'center', sortable: true }, { field: 'ra', title: '操作', width: 100, align: 'center', formatter: $.shareWindow.prototype.formatRadio } ]] }); //将coulum传进去 $.shareWindow.prototype.windowOpen(); } //双击单元格弹出 star function bandFixedAssetsWindow() { $.shareWindow({ title: "选择商品", datagridUrl: "../GoodsCode/GoodsCode.ashx?type=Datagrid", treeUrl: "../GoodsCode/GoodsCode.ashx?type=Tree", Edg_id: "dg_FixedAssetsGeneral", outputType: "2", inputs: ["Id", "Goods_Code", "Goods_Number", "Goods_Name", "Goods_BigUnit", "Goods_SmallUint", "Goods_Spec", "Goods_Aear", "Goods_Model"], outputs: ["Id", "Goods_Code", "Goods_Number", "Goods_Name", "tb_ddw", "tb_xdw", "tb_guige", "tb_sjkc", "tb_Type"], addRow: addRow, singleSelect: false, afterSetValues: function (arr) { // console.log(arr); for (var i = 0; i < arr.length; i++) { var obj = {}; //如果有库存，显示库存，如果没有显示为0 obj.tb_sjkc = isNaN(parseFloat(arr[i]["tb_sjkc"])) ? 0 : parseFloat(arr[i]["tb_sjkc"]); //console.log(obj); $("#dg_FixedAssetsGeneral").datagrid('updateRow', { index: i, row: obj }); } }, columns: [[ { field: 'ra', width: 40, align: 'center', formatter: $.shareWindow.prototype.formatCheckBox }, { field: 'Goods_Code', title: '编码', width: 100, align: 'center', sortable: true }, { field: 'Goods_Name', title: '名称', width: 100, align: 'center', sortable: true }, { field: 'Goods_SmallUint', title: '单位', width: 100, align: 'center', sortable: true }, { field: 'Goods_Spec', title: '规格', width: 100, align: 'center', sortable: true }, { field: 'Goods_Aear', title: '库存', width: 100, align: 'center', sortable: true }, { field: 'Goods_Model', title: '型号', width: 100, align: 'center', sortable: true }, { field: 'Id', hidden: true }, { field: 'Goods_BigUnit', hidden: true } ]] }); //将coulum传进去 $.shareWindow.prototype.windowOpen(); } //双击单元格弹出 End </script> </html>
扫一扫
202
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
