jquery增加时编辑jqGrid(实例代码)

代码如下:

function showTestSubjectGrid() {
    $("#testSubjectGrid").jqGrid({
        url: "",
        datatype: "json",
        height: 215,
        width: 480,
        caption: "测试科目",
        autoheight: true,
        autowidth: true,
        scrollrows: false, // 是否显示行滚动条
        multiselect: true, // 是否显示复选框
        hidegrid: false, //取消Grid的收缩
        postData: {
            strJson: testsubjectData
        },
        colNames: ['', '测试科目', '开始时间', '结束时间', '场次', ],
        colModel: [
        {
            name: 'data',
            index: 'data',
            hidden: true
        }, {
            name: 'display_content',
            index: 'display_content',
            width: 100,
            editable: true,
            align: 'left'
        }, {
            name: 'exam_startTime',
            index: 'exam_startTime',
            width: 110,
            editable: true,
            align: 'center'
        }, {
            name: 'exam_EndTime',
            index: 'exam_EndTime',
            width: 110,
            editable: true,
            align: 'center'
        }, {
            name: 'exam_turn',
            index: 'exam_turn',
            width: 110,
            editable: true,
            align: 'center'
        }],
        jsonReader: {
            root: "rows",
            repeatitems: false,
            id: "data"
        },
        gridComplete: function () {
            var testIds = $("#testSubjectGrid").jqGrid("getDataIDs");
            for (var i = 0; i < testIds.length; i++) {
                var cid = testIds[i];
                var exam_begintime = "<input type='text' name='exam_begintime_" + testIds[i] + "' id='exam_begintime_" + testIds[i] + "'/>";
                var exam_endtime = "<input type='text' name='exam_endtime_" + testIds[i] + "' id='exam_endtime_" + testIds[i] + "'/>";
                var exam_turn = "<input type='text' name='exam_turn_" + testIds[i] + "' id='exam_turn_" + testIds[i] + "'/>";
                jQuery("#testSubjectGrid").jqGrid('setRowData', cid, { exam_startTime: exam_begintime });
                jQuery("#testSubjectGrid").jqGrid('setRowData', cid, { exam_EndTime: exam_endtime });
                jQuery("#testSubjectGrid").jqGrid('setRowData', cid, { exam_turn: exam_turn });
                $("#exam_begintime_" + testIds[i]).datepicker({
                    showOn: 'button',
                    buttonText: '选择'
                });
                $("#exam_endtime_" + testIds[i]).datepicker({
                    showOn: 'button',
                    buttonText: '选择'
                });

}
        }
    });
};

(0)

相关推荐

  • Java中jqGrid 学习笔记整理——进阶篇(二)

    相关阅读: Java中jqGrid 学习笔记整理--进阶篇(一) 本篇开始正式与后台(java语言)进行数据交互,使用的平台为 JDK:java 1.8.0_71 myEclisp 2015 Stable 2.0 Apache Tomcat-8.0.30 Mysql 5.7 Navicat for mysql 11.2.5(mysql数据库管理工具) 一.数据库部分 1.创建数据库 使用Navicat for mysql创建数据库(使用其他工具或直接使用命令行暂不介绍) 2. 2.创建表 双击打

  • JQGrid的用法解析(列编辑,添加行,删除行)

    复制代码 代码如下: <script> $(document).ready(function(){ initPlsfList();});//初始化grid列表function initPlsfList(){ //缓存表列数组,key 为页面元素的name ,value 对应数据库中的字段 var cellArray = new Array(); cellArray["zoneID"] ="ZONE_ID";  cellArray["factor

  • jqGrid 学习笔记整理——进阶篇(一 )

    在浏览导航栏添加所需按钮 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>DEMO</title> <link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css" /> <link rel=&

  • Jqgrid设置全选(选择)及获取选择行的值示例代码

    1.添加multiselect: true 2.获取选择行的值 复制代码 代码如下: var rowData = jQuery('#List').jqGrid('getGridParam','selarrrow');    if(rowData.length)     {        for(var i=0;i<rowData.length;i++)        {           var name= jQuery('#List').jqGrid('getCell',rowData[i]

  • Jqgrid表格随窗口大小改变而改变的简单实例

    使用jquery插件,主要实现当窗口发生改变时jqgird表格也随着改变大小 html:<div id="liste">  <table id="list" class="scroll" cellpadding='0' cellspacing='0' ></table>     <div id="pager" class="scroll" style="t

  • jqgrid 编辑添加功能详细解析

    ColModel 是jqGrid里最重要的一个属性,设置表格列的属性. 用法: Java代码 : 复制代码 代码如下: jQuery("#gridid").jqGrid({   ...      colModel: [ {name:'name1', index:'index1'...}, {...}, ... ],   ..   }); 属性  数据类型  备注  默认值  align  string  定义单元格对齐方式:可选值:left, center, right.  left 

  • jQuery中jqGrid分页实现代码

    (1)页面代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UT

  • jquery增加时编辑jqGrid(实例代码)

    复制代码 代码如下: function showTestSubjectGrid() {    $("#testSubjectGrid").jqGrid({        url: "",        datatype: "json",        height: 215,        width: 480,        caption: "测试科目",        autoheight: true,        a

  • jQuery动态增减行的实例代码解析(推荐)

    先给大家展示下效果图: 这是没有增加时的界面: 增加后的界面: 删除后的界面: 原因分析: 不擅长jquery和JavaScript 场景: 代码如下: <table class="table table-bordered"> <thead> <tr> <th style="width: 10px">輪次</th> <th style="width: 100%">比賽時間&l

  • jQuery模拟爆炸倒计时功能实例代码

     HTML部分  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>炸弹倒计时</title> <style type="text/css"> .content { width: 200px; margin:0 auto; } .content .img1 { /*添加炸弹动

  • jQuery EasyUI window窗口使用实例代码

    需求:点击[增加]按钮,弹出窗口,并对所有输入项内容进行校验,校验通过就提交给后台的action处理,没有通过校验就弹窗提示. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>管理取派员</title> <!-- 导入jquery核心类库 --> <script type="text/javascript"

  • jQuery判断邮箱格式对错实例代码讲解

    废话不多说了,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>检测Email地址格式是否正确</title> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"><

  • jQuery实现拖动效果的实例代码

    jQuery实现拖动效果的实例代码,具体代码如下所示: <!DOCTYPE html> <html> <head> <style> div{ width:100px; height:100px; background:red; position:absolute;} </style> <script type="text/javascript" src="js/jquery-1.11.3.js">

  • iOS 增加右侧按钮功能实例代码

    一,工程图. 二,代码. ViewController.m - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. //增加右侧按钮 [self addRightButton]; } #pragma -mark -functions //增加右侧按钮 -(void)addRightButton { UIBarButtonI

  • 基于Bootstrap和jQuery构建前端分页工具实例代码

    前言 为啥名字叫[前端分页工具]?因为我实在想不到什么好名字,如果想要更加贴切的理解这个工具,应该从业务来看 业务是这样的,有一个数据从后台传到前台,因为数据量不大,因此传过来之后直接显示即可,但是=.=所谓的数据量不大,最多也达到成百上千条,不可能全部显示出来,那么就需要分页 常规的分页是利用Ajax,通过传页偏移量到后台,后台查询数据库再返回数据,可以实现无刷新分页,拿到的数据也是最新的 前端分页 优点:一次传输数据,避免用户反复请求服务器,减少网络带宽.服务器调度压力.数据库查询.缓存查询

  • jQuery Ajax 全局调用封装实例代码详解

    有一种情况:全站都要用异步方式来调用 数据,提交数据,那么你每次操作 都会要$.ajax({.....}) 写重复的方法 和代码,冗余太大, 也浪费时间,虽说你有代码自动提示补全,但真的不优雅,身为前端极客,是不能允许的! [嘿嘿!虽说我现在基本不用jquery了 ,不过异步概念 是永远要用的,就帮助下新人] jQuery Ajax通用js封装 第一步:引入jQuery库 <script type="text/javascript" src="/js/jquery.mi

  • jQuery图片轮播功能实例代码

    jquery 轮播图代码如下所示: <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>图片轮播</title> <style> *{margin:0px;padding:0px;} .one{ float:left; position:relative; lef

随机推荐