极客观点
项目管理
HarmonyOS
$(".btn").click(function () {
$("#gbox_grid-table").empty()
if($(".inps").val()=="1"){
var colNames = [' 81', 'ID', 'Last Sales', 'Name', 'Stock', 'Ship via', 'Notes', "7", "8", "9", "10", "11", "12", "13", "14", "15"]
console.log(1111111)
}else{
var colNames = [' 88', 'ID', 'Last Sales', 'Name', 'Stock', 'Ship via', 'Notes', "7", "8", "9", "10", "11", "12", "13", "14", "15"]
console.log(22222)
}
var colModel = [
{
name: 'myac', index: '', width: 80, fixed: true, sortable: false, resize: false,
formatter: 'actions',
formatoptions: {
keys: true,
delOptions: { recreateForm: true },
//editformbutton:true, editOptions:{recreateForm: true, beforeShowForm:beforeEditCallback}
}
},
{ name: '0', index: '0', width: 150, editable: true },
{ name: '1', index: '1', width: 150, editable: true, },
{ name: '2', index: '2', width: 150, editable: true, },
{ name: '3', index: '3', width: 150, editable: true },
{ name: '4', index: '4', width: 150, editable: true, },
{ name: '5', index: '5', width: 150, editable: true },
{ name: '6', index: '6', width: 150, editable: true },
{ name: '7', index: '7', width: 150, editable: true },
{ name: '8', index: '8', width: 150, editable: true },
{ name: '9', index: '9', width: 150, editable: true },
{ name: '10', index: '10', width: 150, editable: true },
{ name: '11', index: '11', width: 150, editable: true },
{ name: '12', index: '12', width: 150, editable: true },
{ name: '13', index: '13', width: 150, editable: true },
{ name: '14', index: '14', width: 150, editable: true },
]
var colName = [
["08020092", "AVX", "1200m", "120", "0.3", "30u", "AVX", "AVX", "AVX", "AVX", "AVX",],
["08020098", "KEMET", "1200m", "120", "1.0", "100u", "AVX", "AVX", "AVX", "AVX", "AVX",],
["08020000", "VISHAY", "1200m", "120", "2.5", "250u", "AVX", "AVX", "AVX", "AVX", "AVX",],
["08020000", "VISHAY", "1200m", "120", "2.5", "250u", "AVX", "AVX", "AVX", "AVX", "AVX",],
["08020000", "VISHAY", "1200m", "120", "2.5", "250u", "AVX", "AVX", "AVX", "AVX", "AVX",],
["08020000", "VISHAY", "1200m", "120", "2.5", "250u", "AVX", "AVX", "AVX", "AVX", "AVX",],
["08020000", "VISHAY", "1200m", "120", "2.5", "250u", "AVX", "AVX", "AVX", "AVX", "AVX",],
["08020000", "VISHAY", "1200m", "120", "2.5", "250u", "AVX", "AVX", "AVX", "AVX", "AVX",],
["08020000", "VISHAY", "1200m", "120", "2.5", "250u", "AVX", "AVX", "AVX", "AVX", "AVX",],
["08020000", "VISHAY", "1200m", "120", "2.5", "250u", "AVX", "AVX", "AVX", "AVX", "AVX",],
["08020000", "VISHAY", "1200m", "120", "2.5", "250u", "AVX", "AVX", "AVX", "AVX", "AVX",],
["08020000", "VISHAY", "1200m", "120", "2.5", "250u", "AVX", "AVX", "AVX", "AVX", "AVX",],
["08020000", "VISHAY", "1200m", "120", "2.5", "250u", "AVX", "AVX", "AVX", "AVX", "AVX",],
["08020000", "VISHAY", "1200m", "120", "2.5", "250u", "AVX", "AVX", "AVX", "AVX", "AVX",],
["08020000", "VISHAY", "1200m", "120", "2.5", "250u", "AVX", "AVX", "AVX", "AVX", "AVX",],
]
var grid_data = [];
colName.forEach(function (item) {
var temp = {};
item.forEach(function (value, index) {
temp[index] = value;
});
grid_data.push(temp);
})
//console.log(grid_data);
var grid_data1 =
[
{ "id1": "1", "name": "Desktop Computer", "note": "note", "stock": "Yes", "ship": "FedEx", "sdate1": "2007-12-03" },
];
jQuery(function ($) {
var grid_selector = "#grid-table";
var pager_selector = "#grid-pager";
jQuery(grid_selector).jqGrid({
//direction: "rtl",
data: grid_data,
datatype: "local",
height: 250,
colNames: colNames,//表头
colModel: colModel,
viewrecords: true,
rowNum: 10,
rowList: [10, 20, 30],
pager: pager_selector,
altRows: true,
//toppager: true,
multiselect: true,
//multikey: "ctrlKey",
multiboxonly: true,
loadComplete: function () {
var table = this;
setTimeout(function () {
styleCheckbox(table);
updateActionIcons(table);
updatePagerIcons(table);
enableTooltips(table);
}, 0);
},
editurl: $path_base + "/dummy.html",//nothing is saved
caption: "周晓虎",
autowidth: true
});
//enable search/filter toolbar
//jQuery(grid_selector).jqGrid('filterToolbar',{defaultSearch:true,stringResult:true})
//switch element when editing inline
function aceSwitch(cellvalue, options, cell) {
setTimeout(function () {
$(cell).find('input[type=checkbox]')
.wrap('<label class="inline" />')
.addClass('ace ace-switch ace-switch-5')
.after('<span class="lbl"></span>');
}, 0);
}
//enable datepicker
function pickDate(cellvalue, options, cell) {
setTimeout(function () {
$(cell).find('input[type=text]')
.datepicker({ format: 'yyyy-mm-dd', autoclose: true });
}, 0);
}
//navButtons
jQuery(grid_selector).jqGrid('navGrid', pager_selector,
{ //navbar options
edit: true,
editicon: 'icon-pencil blue',
add: true,
addicon: 'icon-plus-sign purple',
del: true,
delicon: 'icon-trash red',
search: true,
searchicon: 'icon-search orange',
refresh: true,
refreshicon: 'icon-refresh green',
view: true,
viewicon: 'icon-zoom-in grey',
},
{
//edit record form
//closeAfterEdit: true,
recreateForm: true,
beforeShowForm: function (e) {
var form = $(e[0]);
form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
style_edit_form(form);
}
},
{
//new record form
closeAfterAdd: true,
recreateForm: true,
viewPagerButtons: false,
beforeShowForm: function (e) {
var form = $(e[0]);
form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
style_edit_form(form);
}
},
{
//delete record form
recreateForm: true,
beforeShowForm: function (e) {
var form = $(e[0]);
if (form.data('styled')) return false;
form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
style_delete_form(form);
form.data('styled', true);
},
onClick: function (e) {
alert(1);
}
},
{
//search form
recreateForm: true,
afterShowSearch: function (e) {
var form = $(e[0]);
form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
style_search_form(form);
},
afterRedraw: function () {
style_search_filters($(this));
}
,
multipleSearch: true,
/**
multipleGroup:true,
showQuery: true
*/
},
{
//view record form
recreateForm: true,
beforeShowForm: function (e) {
var form = $(e[0]);
form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
}
}
)
function style_edit_form(form) {
//enable datepicker on "sdate" field and switches for "stock" field
form.find('input[name=sdate]').datepicker({ format: 'yyyy-mm-dd', autoclose: true })
.end().find('input[name=stock]')
.addClass('ace ace-switch ace-switch-5').wrap('<label class="inline" />').after('<span class="lbl"></span>');
//update buttons classes
var buttons = form.next().find('.EditButton .fm-button');
buttons.addClass('btn btn-sm').find('[class*="-icon"]').remove();//ui-icon, s-icon
buttons.eq(0).addClass('btn-primary').prepend('<i class="icon-ok"></i>');
buttons.eq(1).prepend('<i class="icon-remove"></i>')
buttons = form.next().find('.navButton a');
buttons.find('.ui-icon').remove();
buttons.eq(0).append('<i class="icon-chevron-left"></i>');
buttons.eq(1).append('<i class="icon-chevron-right"></i>');
}
function style_delete_form(form) {
var buttons = form.next().find('.EditButton .fm-button');
buttons.addClass('btn btn-sm').find('[class*="-icon"]').remove();//ui-icon, s-icon
buttons.eq(0).addClass('btn-danger').prepend('<i class="icon-trash"></i>');
buttons.eq(1).prepend('<i class="icon-remove"></i>')
}
function style_search_filters(form) {
form.find('.delete-rule').val('X');
form.find('.add-rule').addClass('btn btn-xs btn-primary');
form.find('.add-group').addClass('btn btn-xs btn-success');
form.find('.delete-group').addClass('btn btn-xs btn-danger');
}
function style_search_form(form) {
var dialog = form.closest('.ui-jqdialog');
var buttons = dialog.find('.EditTable')
buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'icon-retweet');
buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'icon-comment-alt');
buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'icon-search');
}
function beforeDeleteCallback(e) {
var form = $(e[0]);
if (form.data('styled')) return false;
form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
style_delete_form(form);
form.data('styled', true);
}
function beforeEditCallback(e) {
var form = $(e[0]);
form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
style_edit_form(form);
}
//it causes some flicker when reloading or navigating grid
//it may be possible to have some custom formatter to do this as the grid is being created to prevent this
//or go back to default browser checkbox styles for the grid
function styleCheckbox(table) {
/**
$(table).find('input:checkbox').addClass('ace')
.wrap('<label />')
.after('<span class="lbl align-top" />')
$('.ui-jqgrid-labels th[id*="_cb"]:first-child')
.find('input.cbox[type=checkbox]').addClass('ace')
.wrap('<label />').after('<span class="lbl align-top" />');
*/
}
//unlike navButtons icons, action icons in rows seem to be hard-coded
//you can change them like this in here if you want
function updateActionIcons(table) {
/**
var replacement =
{
'ui-icon-pencil' : 'icon-pencil blue',
'ui-icon-trash' : 'icon-trash red',
'ui-icon-disk' : 'icon-ok green',
'ui-icon-cancel' : 'icon-remove red'
};
$(table).find('.ui-pg-div span.ui-icon').each(function(){
var icon = $(this);
var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
})
*/
}
//replace icons with FontAwesome icons like above
function updatePagerIcons(table) {
var replacement =
{
'ui-icon-seek-first': 'icon-double-angle-left bigger-140',
'ui-icon-seek-prev': 'icon-angle-left bigger-140',
'ui-icon-seek-next': 'icon-angle-right bigger-140',
'ui-icon-seek-end': 'icon-double-angle-right bigger-140'
};
$('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function () {
var icon = $(this);
var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
if ($class in replacement) icon.attr('class', 'ui-icon ' + replacement[$class]);
})
}
function enableTooltips(table) {
$('.navtable .ui-pg-button').tooltip({ container: 'body' });
$(table).find('.ui-pg-div').tooltip({ container: 'body' });
}
//var selr = jQuery(grid_selector).jqGrid('getGridParam','selrow');
});
})
jQuery("#grid_id").trigger("reloadGrid")