首页 > 代码库 > JavaScript splice() 方法，操作数组或者jquey grid的columns根据需要显示不同的字段
JavaScript splice() 方法，操作数组或者jquey grid的columns根据需要显示不同的字段
JavaScript splice() 方法，操作数组或者jquey grid的columns显示不同的字段
定义和用法
splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
注释：该方法会改变原始数组。
语法
arrayObject.splice(index,howmany,item1,.....,itemX)
参数 | 描述 |
index | 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。 |
howmany | 必需。要删除的项目数量。如果设置为 0，则不会删除项目。 |
item1, ..., itemX | 可选。向数组添加的新项目。 |
返回值
类型 | 描述 |
Array | 包含被删除项目的新数组，如果有的话。 |
说明
splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。
如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。
请注意，splice() 方法与 slice() 方法的作用是不同的，splice()方法会直接对数组进行修改。
实例
例子 1
在本例中，我们将创建一个新数组，并向其添加一个元素：
<script type="text/javascript">
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr + "<br />")
arr.splice(2,0,"William")document.write(arr + "<br />")
</script>
输出：
George,John,Thomas,James,Adrew,Martin
George,John,William,Thomas,James,Adrew,Martin个人注释：从索引位置2处开始操作，0表示添加元素，第三个参数“William”表示要添加的元素，故从索引位置2后开始添加一个元素“William”
例子 2
在本例中我们将删除位于 index 2 的元素，并添加一个新元素来替代被删除的元素：
<script type="text/javascript">
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr + "<br />")
arr.splice(2,1,"William")document.write(arr)
</script>
输出：
George,John,Thomas,James,Adrew,Martin George,John,William,James,Adrew,Martin
个人注释：从索引位置2处开始操作，1表示删除元素的个数，故删除一个元素，第三个参数“William”表示要添加的元素，故从索引位置2后开始删除一个元素“Thomas”，然后再添加一个元素“William”
例子 3
在本例中我们将删除从 index 2("Thomas") 开始的三个元素，并添加一个新元素("William") 来替代被删除的元素：
<script type="text/javascript">
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr + "<br />")
arr.splice(2,3,"William")document.write(arr)
</script>
输出：
George,John,Thomas,James,Adrew,Martin George,John,William,Martin
个人注释：从索引位置2处开始操作，3表示删除元素的个数，故删除3个元素，第三个参数“William”表示要添加的元素，故从索引位置2后开始删除3个元素“Thomas,James,Adrew”，然后再添加一个元素“William”
例子 4
在本例中我们将修改jquery grid中的columns列数或者修改列标题。
假设在js文件中有如下的列表初始化代码：
Purchase_index={
..............................
//列表初始化
gridInit: function () {
Purchase_index._grid =$(‘#dg_i_Purchase‘, Purchase_index._contain).datagrid({
fitColumns: true, //true 自动扩大或缩小列的尺寸以适应表格的宽带，并防止水平滚动
nowrap: true, // true 就会把数据显示在一行里
striped: true, //true 自动把行条纹化
rownumbers: true, //true显示行号的列
pagination: true, //true 则初始化页码
singleSelect: true, //true 只允许选中一行
showFooter: true,
pageList: [50, 100, 200],
pageSize: 50,
idField: ‘Guid‘,
sortName: ‘Created‘,
sortOrder: ‘desc‘,
url:‘/AssetManage/Purchase/PurchaseSearch/‘,
columns:Purchase_index.gridColumns(), //Columns的来源
queryParams:Purchase_index.queryParams(),
height: mainPanelHeight51,
//双击行打开详情界面
onDblClickRow: function (index,row) {
Purchase_index.openDetailsWin();
},
onLoadSuccess: function (data) {
$(‘table.datagrid-btable tr‘,Purchase_index._contain).attr(‘title‘, ‘双击行查看详情‘);
Purchase_index._loadComplete =true;
}
});
},
//grid表显示列
gridColumns: function () {
var selectTab =Purchase_index._tabs.tabs(‘getSelected‘);
var title =selectTab.panel(‘options‘).title;
var columns;
//如果是待采购、待入库、已采购、已入库，显示相同的列
if (title == "待采购" || title == "待入库" || title == "已采购" || title == "已入库") {
columns=[[
{ field: ‘PurchaseNo‘, title: ‘编号‘, width: 60, formatter: function(val, row) {
return ‘<ahref="javascript:void(0)"onclick="Purchase_index.openDetailsWin(\‘‘ + row.Guid + ‘\‘)">‘ +val + ‘</a> ‘;
}
},
{ field: ‘AssetSubType‘, title: ‘类别名称‘, width: 50 },
{ field: ‘ApplyPurchaseModel‘,title: ‘申请规格型号‘, width: 50 },
{ field: ‘ApplyPurchaseCount‘,title: ‘申请采购数量‘, width: 40 },
{ field: ‘MeasureUnit‘, title: ‘计量单位‘, width: 40 },
{ field: ‘RealPurchaseModel‘,title: ‘实际规格型号‘, width: 50,formatter: function (val, row) {
if (row.RealPurchaseModel ==null && row.StatusValue != 4) { //状态为4是采购失败，采购失败的时候也返回其空值，不返回input文本框
var realpurchaseModel =(row.ApplyPurchaseModel == null) ? "" : row.ApplyPurchaseModel;
return ‘<inputname="RealPurchaseModel" value=http://www.mamicode.com/"‘ + realpurchaseModel +‘">‘;
}
return val;
}
},
{ field: ‘RealPurchaseCount‘, title: ‘实际采购数量‘, width: 40, formatter: function(val, row) {
if (row.RealPurchaseCount ==null && row.StatusValue != 4) {//状态为4是采购失败，采购失败的时候也返回其空值，不返回input文本框
return ‘<inputname="RealPurchaseCount" other="Count"data-options="required:true,missingMessage:\‘不能为空，只能输入整数数字\‘,min:0"onclick="Purchase_index.textChanged(this)" value=http://www.mamicode.com/"‘ +row.ApplyPurchaseCount + ‘">‘;
}
return val;
}
},
{ field: ‘SinglePrice‘, title: ‘单价‘, width: 30, formatter: function(val, row) {
if (val == null &&row.StatusValue != 4) {//状态为4是采购失败，采购失败的时候也返回其空值，不返回input文本框
return ‘<inputname="SinglePrice" other="SinglePrice"data-options="required:true,missingMessage:\‘不能为空，只能输入数字,精确到小数点2位\‘,min:0, precision: 2"onclick="Purchase_index.textChanged(this)" ><\/input>‘;
}
return val;
}
},
{ field: ‘TotalPrice‘, title: ‘总价‘, width: 50, formatter: function(val, row) {
if (val == null &&row.StatusValue != 4) {//状态为4是采购失败，采购失败的时候也返回其空值，不返回input文本框
return ‘<inputname="TotalPrice" other="TotalPrice"data-options="required:true,missingMessage:\‘不能为空，只能输入数字\‘,min:0, precision: 2"onclick="Purchase_index.TotaltextChanged(this)"><\/input>‘;
}
return val;
}
},
{ field: ‘CurrencyType‘, title: ‘币种‘, width: 40, formatter: function(val, row) {
var select = ‘<selectid="CurrencyType_i_Purchase" name="CurrencyType" >‘;
if (val == ""&& row.StatusValue != 4) {//状态为4是采购失败，采购失败的时候也返回其空值，不返回select选择框
var CurrencyType =Purchase_index._currencyTypeList; //将币种列表值赋给该变量
if (CurrencyType != null) {
$(CurrencyType).each(function (index, item) {//加载币种列表
if (item.Name == "人民币") { //默认选择人民币
select = select+ "<option value=http://www.mamicode.com/‘" + item.Value + "/‘+selected=‘selected‘ >" +item.Name + "";
}
else {
select = select +"<option value=http://www.mamicode.com/‘" + item.Value + "/‘>" + item.Name +"";
}
});
select +=‘</select>‘;
}
return select;
}
return val;
}
},
{ field: ‘Note‘, title: ‘备注‘, width: 80, formatter: function(val, row) {
if (val == null &&row.StatusValue != 4) {//状态为4是采购失败，采购失败的时候也返回其空值，input文本框
return ‘<inputname="Note"><\/input>‘;
}
return val;
}
},
{ field: ‘Status‘, title: ‘操作‘, width: 80, formatter: function(val, row) {
if (title == "待采购") {
return ‘<ahref="javascript:void(0)"onclick="Purchase_index.purchaseSuccessSave(\‘‘ + row.Guid + ‘\‘,\‘‘ +row.ItemId + ‘\‘,this)">采购完成</a> <a href="javascript:void(0)"onclick="Purchase_index.purchaseFailedSave(\‘‘ + row.Guid + ‘\‘,\‘‘ +row.ItemId + ‘\‘,this)">采购失败</a>‘;
}
else if (title == "待入库") {
return ‘<ahref="javascript:void(0)" name="putinStorage"onclick="Purchase_index.putinStorage(\‘‘ + row.Guid + ‘\‘,\‘‘ + row.ItemId+ ‘\‘,\‘‘ + row.AssetSubType + ‘\‘,\‘‘ + row.RealPurchaseModel + ‘\‘,\‘‘ +
row.RealPurchaseCount +‘\‘,\‘‘ + row.MeasureUnit + ‘\‘,\‘‘ + row.CurrencyTypeValue + ‘\‘,\‘‘ +row.SinglePrice + ‘\‘,\‘‘ + row.TotalPrice + ‘\‘,\‘‘ + row.Note +‘\‘,this)">入 库</a>‘;
}
else {
return row.Status;
}
}
}]]
}
else { //除了上面的四种状态外，显示另外的列
columns=[[
{ field: "PurchaseNo",title: ‘编号‘, width: 100, sortable:true, formatter: function (val, row) {
return ‘<ahref="javascript:void(0)"onclick="Purchase_index.openDetailsWin(\‘‘ + row.Guid + ‘\‘)">‘ +val + ‘</a>‘;
}
},
{ field:"AssetTypeValue", title: ‘资产类型‘,width: 100, sortable: true, formatter: function (value, rowData, rowIndex) {
return rowData.AssetType;
}
},
{ field: "CreatedBy",title: ‘申请人‘, width: 100,sortable: true, formatter: function (value, rowData, rowIndex) {
return rowData.CreatedBy;
}
},
{ field: "Remark", title:‘采购事由‘, width: 100,sortable: true },
{ field: "Created",title: ‘申请时间‘, width: 100,sortable: true },
{ field: "Status", title:‘状态‘, width: 100,sortable: true,
formatter: function (value,rowData, rowIndex) {
// return rowData.Status;
switch(rowData.StatusValue) {
case 7:return "<font style=‘color:red‘>" + value +"</font>";
case 8: return"<font style=‘color:green‘>" + value +"</font>";
case 9: return"<font style=‘color:blue‘>" + value + "</font>";
default: return value;
}
}
}
]]
}
//不同的tab显示不同列
if (title == "已采购") {
columns[0][11].title = "状态"; //标题“操作”改为“状态”
columns[0].splice(11,0, { field: ‘PurchaseTime‘, title: ‘采购时间‘, width: 80 });
}
else if (title =="已入库") {
columns[0][11].title = "状态"; //标题“操作”改为“状态”
columns[0].splice(11, 0, { field: ‘StorageTime‘, title: ‘入库时间‘, width: 80});
}
return columns;
},
............................
}
个人注释：在这段代码中，当不同的状态显示不同的信息时，有两种方法。第一个if和else语句是第一种方法，就是当两种不同的状态显示的列没有交集或者交集很少，基本上都不相同的时候，可以直接构造不同的columns，而下面的if和else则是第二种方法，就是当在待采购、待入库、已采购、已入库状态时显示的列大部分字段都相同的时候写一个columns为共同的字段部分，但是当这四种中某一个状态需要多一个字段或者少一两个字段的时候，就可以用到js的splice方法来添加或者移除部分字段了，就是红色代码的部分。
下面显示下界面上的区别图：
待采购界面图：
变化后的已采购界面图：
待入库界面图：
对比后的已入库界面图：
