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="‘ + realpurchaseModel +‘"><\/input>‘;

}

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="‘ +row.ApplyPurchaseCount + ‘"><\/input>‘;

}

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=\‘" + item.Value + "\‘+selected=‘selected‘   >" +item.Name + "</option>";

}

else {

select = select +"<option value=\‘" + item.Value + "\‘>" + item.Name +"</option>";

}

});

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>&nbsp;&nbsp;<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方法来添加或者移除部分字段了，就是红色代码的部分。

下面显示下界面上的区别图：

待采购界面图：

变化后的已采购界面图：

待入库界面图：

对比后的已入库界面图：

JavaScript splice() 方法，操作数组或者jquey grid的columns根据需要显示不同的字段

时间： 2024-12-20 20:02:17

JavaScript splice() 方法，操作数组或者jquey grid的columns根据需要显示不同的字段的相关文章

关于Javascript splice方法的一个坑。

w3c相关文档:http://www.w3school.com.cn/jsref/jsref_splice.asp bug:购物车计算价格的时候.加商品没问题,减商品的时候价格总是计算错误. 经排查发现在减商品计算总价的时候调用了splice方法,导致正在循环的数组发生了改变,价格计算错误. 修改方法:总价计算完成的时候再操作数组. 上代码: 1 //错误代码 2 $.each(categoryJson.shop_cart_consume,function (i,prodItem) { 3 //

JavaScript splice() 方法

JavaScript Array 对象 定义和用法 splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目. 注释:该方法会改变原始数组.

javaScript几个操作数组增减元素的函数

1. shift:删除原数组第一项,并返回删除元素的值:如果数组为空则返回undefined 2. unshift:将参数添加到原数组开头,并返回数组的长度 var a = [1,2,3,4,5]; var b = a.unshift(-2,-1); //a:[-2,-1,1,2,3,4,5] b:7 注:在IE6.0下测试返回值总为undefined,FF2.0下测试返回值为7,所以这个方法的返回值不可靠,需要用返回值时可用splice代替本方法来使用. 3. pop:删除原数组最后一项,并返

获取grid列表的现在显示的表头字段

var cm       = grid.getColumnModel();    var colCount = cm.getColumnCount();    var temp_obj = new Array();    for (var i = 0; i < colCount; i++) {       if (cm.isHidden(i) == true) {          } else {           // 取表头和索引           var header    = cm

JavaScript 数组的indexOf()、remove()、splice() 方法

js中,按照值删除数组中的某个元素 Array.prototype.indexOf = function(val) {            for (var i = 0; i < this.length; i++) {                if (this[i] == val) return i;            }            return -1;        };        Array.prototype.remove = function(val) {  

javascript Array对象splice()方法

splice() 方法向数组中添加或者从数组中删除项目,然后返回被删除的项目.该方法会改变原始数组. 语法: arrayObject.splice(index,howmany,item1,.....,itemX) index 必需.整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置. howmany 必需.要删除的项目数量.如果设置为 0,则不会删除项目. item1, ..., itemX 可选.向数组添加的新项目. splice()方法返回Array包含被删除项目的新数组,如果有

第4章 方法的操作数组的练习

1.1 方法操作数组练习1.1.1 方法的练习之数组遍历需求:把遍历数组改进为方法实现,并调用方法1.1.2 代码案例十四 package com.itheima_05; /* * 需求:把遍历数组改进为方法实现,并调用方法 */ public class MethodTest { public static void main(String[] args) { // 定义数组 int[] arr = { 11, 22, 33, 44, 55 }; // 遍历 // for (int x = 0

javascript数组强大splice方法

Javascript中总有一些所谓的细节知识会让你目瞪口呆. 前段时间,项目组新增一个需要,要求系统中所有显示时间的地方支持日期格式可定制 什么事日期格式可定制呢,在平常呢,我们看到的时间格式一般是"yyyy-MM-dd"形式的,现在要支持如下六种: yyyy-MM-dd  hh:mm:ss MM-dd-yyyy hh:mm:ss dd-MM-yyyy hh:mm:ss yyyy/MM/dd hh:mm:ss MM/dd/yyyy hh:mm:ss dd/MM/yyyy hh:mm:s

关于javascript里面仿python切片操作数组的使用方法

其实在使用了好一段时间的 python之后,我觉得最让我念念不忘的并不是python每次在写函数或者循环的时候可以少用{}括号这样的东西(ps:其实也是了..感觉很清爽,而且又开始写js的时候老是想用xxx in range(): ...跪.:( ) 而是我觉得字符串操作的切片真实让我感到前所未有的爽. 试想一下,我们平时操作最多的数组和字符串在切片的帮助下,不知道可以省去多少时间和麻烦.而且有了切片甚至不用去记很多可以被切片代替的api. 今天我在啃<学习javascript数据结构与算法>