jquery登录注册增删改查(jquery的增删改查命令)

http://www.itjxue.com  2023-01-28 22:59  来源:未知  点击次数: 

jquery对json数据进行增删改查的例子,求高手指点,我是新手,没怎么接触过

对json数据进行增删改查,大部分是要对json数组进行操作,我定义一个数组,进行操作

var list=[

{

id:1,

name:"张三",

age:12

},

{

id:2,

name:"李四",

age:21

},

{

id:3,

name:"王五",

age:31

}

];

这个json数组有三个对象,每个对象有三个属性,id,name,age

//增操作,增加一个叫小胖的人

var obj={

id:4,

name:"小胖",

age:3

}

//push方法可以向数组进行增加操作

list.push(obj);

//console.log会在浏览器f12时在控制太看到,建议用谷歌浏览器

console.log(obj);

//删操作,删除刚刚叫小胖的人

//delnum用来记录要删除的人的索引

var delnum=-1;

//用$.each进行循环,function里面的i,item是数组里每个对象的索引和具体对象,可以打印查看,方便理解

$.each(list,function(i,item){

console.log(i);

console.log(item);

if(item.name=="小胖"){

delnum=i;

}

});

//splice方法表示从数组从索引delnum开始,删除1个对象

list.splice(delnum,1);

//打印一下

console.log(list);

//改操作,修改所有人大于20岁的人,姓名前加一个“大”

//也是用$.each

$.each(list,function(i,item){

if(item.age20){

item.name="大"+item.name;

}

})

//查操作,其实已经贯穿在上面了,查询所有大于20岁的人并打印出来

//用newlist记录查询的结果

var newlist=[];

//也是用$.each

$.each(list,function(i,item){

if(item.age20){

//这一步不理解的,可以去看前面的增操作

newlist.push(item)

}

})

//打印查询结果,会有姓名为李四和王五的数据出来(因为已经做了改操作,其实应该是“大李四”和“大王五”)

console.log(newlist);

手敲得代码

java在登入成功后调到另一个页面怎么jQuery实现增删查改?

不用表单提交。

全部采用jquery的ajax操作。

根据服务器返回的参数进行判断。

客户端执行跳转。

jqgrid怎么实现增删改查

jqGrid的调用以及常用增删改查的使用方法 以下是代码参考一下吧

jquery grid是富客户端的,基于XML , Ajax网格插件的jQuery库。 jqGridView提供专业的解决方案,代表和编辑表格数据在网络上。精心设计的,具有强大的脚本API的,这可编辑网格是很简单的DHTML与XML 的配置,并显示出令人信服的成果与大量数据。现在我现在熟悉一下jquery grid的的使用方法和一些常用的option设置。

jquery grid是富客户端的,基于XML , Ajax网格插件的jQuery库。 jqGridView提供专业的解决方案,代表和编辑表格数据在网络上。精心设计的,具有强大的脚本API的,这可编辑网格是很简单的DHTML与XML 的配置,并显示出令人信服的成果与大量数据。现在我现在熟悉一下jquery grid的的使用方法和一些常用的option设置。

1.调用grid

jqGrid已经可以从Server端获得数据,并显示在Grid表格中了。下面说一下,如何操作Grid表格及其数据。

jqGrid有很多方法函数,用来操作数据或者操作Grid表格本身。jqGrid的方法有两种调用方式:

1 $("#grid_id").jqGridMethod( parameter1,...,parameterN );

或者

1 $("#grid_id").jqGrid('method', parameter1,...,parameterN );

2.常用的方法函数( )

1. getGridParam

这个方法用来获得jqGrid的选项值。它具有一个可选参数name,name即代表着jqGrid的选项名,例如:

1 var id = $("#gridTable").jqGrid("getGridParam", "selrow");

即可获得当前选中的行的ID。

注:selrow是jqGrid选项之一,默认值是null。这是一个只读选项,代表最后选中行的ID。如果执行翻页或者排序后,此选项将被设为null。关于其他选项,后续会有介绍。

如果不传入name参数,则会返回jqGrid整个选项options。

2. getRowData

这个方法用来获得某行的数据。它具有一个rowid参数,jqGrid会根据这个rowid返回对应行的数据,返回的是name:value类型的数组。例如:

1 var getContact = function() {

2 var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");

3

4 var rowData = $("#gridTable").jqGrid("getRowData", selectedId);

5

6 alert("First Name: " + rowData.firstName);

7 };

如果rowid未能被找到,则返回一个空数组;如果未设置rowid参数,则以数组的形式返回Grid的所有行数据。

3. addRowData

这个方法用于向Grid中插入新的一行。执行成功返回true,否则返回false。它具有4个参数:

rowid :新行的id号;

data :新行的数据对象,形式为{name1:value1,name2: value2…},其中name为colModel中定义的列名称name;

position :插入的位置(first:表格顶端;last:表格底端;before:srcrowid之前;after:srcrowid之后);

srcrowid :新行将插入到srcrowid指定行的前面或后面。

例如:

01 var addContact = function() {

02 var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");

03

04 var dataRow = {

05 id : 99,

06 lastName : "Zhang",

07 firstName : "San",

08 email : "zhang_san@126.com",

09 telNo : "0086-12345678"

10 };

11

12 if (selectedId) {

13 $("#gridTable").jqGrid("addRowData", 99, dataRow, "before", selectedId);

14

15 } else {

16 $("#gridTable").jqGrid("addRowData", 99, dataRow, "first");

17

18 }

19 };

这个方法可以一次性插入多行,data参数必须是[{name1:value1,name2: value2…}, {name1:value1,name2: value2…}]这样的数组形式,而且rowid参数也应该设为data参数对象中代表id的field名称。不过,此时的rowid不用必须是colModel中的一部分。

例如:

01 var addContact = function() {

02 var selectedId = $("#gridTable").jqGrid("getGridParam", "selrow");

03

04 var dataRow = [{

05 id : 99,

06 lastName : "Zhang",

07 firstName : "San",

08 email : "zhang_san@126.com",

09 telNo : "0086-12345678"

10 },

11 {

12 id : 100,

13 lastName : "Li",

14 firstName : "Si",

15 email : "li_si@126.com",

16 telNo : "0086-12345678"

17 },

18 {

19 id : 101,

20 lastName : "Wang",

21 firstName : "Wu",

22 email : "wang_wu@126.com",

23 telNo : "0086-12345678"

24 }];

25

26 if (selectedId) {

27 $("#gridTable").jqGrid("addRowData", "id", dataRow, "before", selectedId);

28

29 } else {

30 $("#gridTable").jqGrid("addRowData", "id", dataRow, "first");

31

32 }

33 };

注:我测试了一下,一次插入多行的情况下,用于设置插入位置的后两个参数,似乎没有起作用。插入的几行数据都被置于Grid的底端。

4. setRowData

这个方法用于为某行数据设置数据值。执行成功返回true,否则返回false。它具有3个参数:

rowid :更新数据的行id;

data :更新的数据对象,形式为{name1:value1,name2: value2…},其中name为colModel中定义的列名称name;这个数据对象,不必设置完全,需要更新哪列,就设置哪列的name:value对;

cssprop :如果cssprop为String类型,则会使用jQuery的addClass为行增加相应名称的CSS类;如果为object类型,则会使用html的css属性,为行添加样式。如果只想增加css样式而不更新数据,可以将data参数设为false。

5. delRowData

这个方法用于删除某行数据。执行成功返回true,否则返回false。具有一个参数rowid,代表要删除的行id。

6. setGridParam

这个方法与getGridParam对应,用于设置jqGrid的options选项。返回jqGrid对象。参数为{name1:value1,name2: value2…}形式的对象(name来自jqGrid的options选项名)。某些选项在设置之后需要trigger("reloadGrid"),才能显示出效果。

7. setGridWidth

为Grid动态地设定一个新的宽度。两个参数:

new_width :以px为单位的新宽度值;

shrink :作用与jqGrid的shrinkToFit选项相同;如果此参数未设置,则沿用jqGrid的shrinkToFit选项的值。

8. trigger("reloadGrid")

根据当前设置,重新载入Grid表格,即意味着向Server发送一个新的请求。此方法只能用于已经构建好的Grid。此外,此方法不会使对colModel所做出的改变生效。应该使用gridUnload来重新载入对colModel的新设置。

jqueryeasyui怎么实现增删改查按钮

建议用ie调试工具看看easyui表格的dom结构,找到按钮(或者父节点)的样式或id就可以用jquery选择器进行修改了。

(责任编辑:IT教学网)

更多

推荐浏览下载文章