利用jqGrid实现类似Excel录入功能

最新推荐文章于 2023-08-16 21:00:00 发布
最新推荐文章于 2023-08-16 21:00:00 发布
阅读量3.9k 收藏 4
点赞数
分类专栏： jqGrid ajax编程 文章标签： excel list jquery function float stylesheet
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ddxkjddx/article/details/6180474
版权

 

jqGrid是一个免费且功能强大的web网格控件，官方提供了十分丰富的API，几乎可以满足项目中数据展示、统计、汇总及录入需求，但也有一些不足的地方，如：不支持二堆表头、冻结列。

下列几个网站可供网友学习参考，希望对大家有所帮助。

http://www.trirand.com/jqgrid/jqgrid.html  (jqGrid范例)

http://www.trirand.com/jqgridwiki/doku.php?id=start  (jqGrid API说明)

http://www.trirand.com/blog/   (jqGrid官方网)

 

现在我们利用jqGrid来实现录入功能，类似Excel，使用的是C#来实现，如下图所示。

 

第一步：

准备好相应的CSS和JS文件，

CSS文件有

Ø  jquery-ui-1.7.1.custom.css(我用的是1.7.1版本)；

JS文件有

Ø  jquery.js(我用的是1.4.2版本)

Ø  jquery-ui-1.8.1.custom.min.js

Ø  grid.locale-cn.js

Ø  jquery.jqGrid.min.js

Ø  jquery.jqGrid.defaults.js

其中，jquery.jqGrid.defaults.js这个文件在网络我没有下载到，是根据官方提供了资料自己编写完成的，内容如下，主要用于实现jqGrid自定义显示：

$.jgrid.defaults = {
    recordtext: "记录 {0} - {1} 共{2}笔",
    emptyrecords: "无数据显示",
    loadtext: "载入中...",
    pgtext: "第{0}页/共{1}页",
    altclass: "jqgrid_alternate_bgcolor"
};

在这里要注意一个地方，如果版本引用不匹配，样式是无法正确显示，之前我遇到过这种情况。


第二步：

新建一个aspx页面和一个JS文件，用于定义jqGrid显示及录入编辑功能的实现，在这里，我把aspx文件命名为bill.aspx，JS文件命名为”bill.js”。bill.js这个文件要记得在bill.aspx页面中引入。

其中，bill.aspx文件内容如下：

<%@ Page Language="C#" %>
<%@ Import Namespace="Platform.UserControl" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>jqGrid Demo</title>   
    <link href="../Platform/css/themes/redmond/jquery-ui-1.7.1.custom.css"rel="stylesheet" type="text/css" />          
    <script type="text/javascript" src="../Platform/JS/jquery.js"></script>
    <script type="text/javascript" src="../Platform/JS/jquery-ui-1.8.1.custom.min.js"></script>
    <script type="text/javascript" src="../Platform/JS/grid.locale-cn.js"></script>
    <script type="text/javascript" src="../Platform/JS/jquery.jqGrid.min.js"></script>       
    <script type="text/javascript" src="../Platform/JS/jquery.jqGrid.defaults.js"></script>
    <script type="text/javascript" src="js/bill.js"></script>   
</head>
<body>
    <table id="list1"></table>
    <div id="pager1"></div>
</body>
</html>


bill.js文件内容如下：

$(function () {                     
      jQuery("#list1").jqGrid({
           datatype: "local",
           height: 80,
           rownumbers: true,
           colNames: ['品名', '包装', '计费方式', '数量', '重量', '体积', '单价', '运费', '保价金额', '保费费率', '保险费', '小计'],
           colModel: [
                            { name: 'PNAME', index: 'PNAME', width: 110, edittype: "text", editable: true, editrules: { required: true} },    //品名
                            {name: 'PACKAGE', index: 'PACKAGE', width: 80, edittype: "select", editable: true, editoptions: { value: "" }, editrules: { required: true} },  //包装
                            {name: 'BILLTYPE', index: 'BILLTYPE', width: 80, edittype: "select", editable: true, editoptions: { value: "" }, editrules: { required: true} },  //计费方式
                            {name: 'QUANTITY', index: 'QUANTITY', width: 50, edittype: "text", editable: true, sorttype: "int", formatter: 'integer', formatoptions: { decimalSeparator: ",", thousandsSeparator: ",", defaultValue: '0' }, editrules: { custom: true, custom_func: quantity_Check} },  //数量
                            {name: 'WEIGHT', index: 'WEIGHT', width: 50, align: "right", editable: true, sorttype: "float", formatter: 'currency', formatoptions: { thousandsSeparator: ",", defaultValue: '0.00' }, editrules: { custom: true, custom_func: deci_Check} },  //重量
 
                            {name: 'VOLUME', index: 'VOLUME', width: 50, align: "right", sorttype: "float", editable: true, formatter: 'currency', formatoptions: { thousandsSeparator: ",", defaultValue: '0.00' }, editrules: { custom: true, custom_func: deci_Check} },  //体积
 
                            {name: 'PRICE', index: 'PRICE', width: 50, align: "right", sorttype: "float", editable: true, formatter: 'currency', formatoptions: { thousandsSeparator: ",", defaultValue: '0.00' }, editrules: { custom: true, custom_func: deci_Check} },    //单价
 
                            {name: 'FREIGHT', index: 'FREIGHT', width: 50, sortable: false, editable: false, sorttype: "float", formatter: 'currency', formatoptions: { thousandsSeparator: ",", defaultValue: '0.00' }, editrules: { custom: true, custom_func: deci_Check} },    //运费
                            {name: 'INSURED', index: 'INSURED', width: 70, align: "right", editable: true, sorttype: "float", formatter: 'currency', formatoptions: { thousandsSeparator: ",", defaultValue: '0.00' }, editrules: { custom: true, custom_func: deci_Check} },           //保价金额         
                            {name: 'PREMIUMS', index: 'PREMIUMS', width: 70, align: "right", sorttype: "float", editable: false, formatter: 'currency', formatoptions: { thousandsSeparator: ",", decimalPlaces: 3, defaultValue: '0.00' }, editrules: { custom: true, custom_func: deci_Check} },    //保险费率
                            {name: 'INSURANCEFEE', index: 'INSURANCEFEE', width: 70, align: "right", sorttype: "float", editable: false, formatter: 'currency', formatoptions: { thousandsSeparator: ",", defaultValue: '0.00' }, editrules: { custom: true, custom_func: deci_Check} },    //保险费
                            {name: 'AMOUNT', index: 'AMOUNT', width: 70, sortable: true, sorttype: "float", formatter: 'currency', formatoptions: { thousandsSeparator: ","}}         //小计
                  ],
                      cellEdit: true,                 //表示表格可编辑         
                      cellsubmit: 'clientArray',      //表示在本地进行修改
                      caption: "货物清单",
                      toolbar: [true, "top"],
                      footerrow: true,
                      userDataOnFooter: true,
                      altRows: true,
                      onCellSelect: function (rowid) {
                          goodsListID = rowid;
                      },
                      afterInsertRow: function (rowid, aData) {
                          jQuery("#list1").jqGrid('setCell', rowid, 'PNAME', '', { color: 'red' });
                          jQuery("#list1").jqGrid('setCell', rowid, 'PACKAGE', '', { color: 'red' });
                          jQuery("#list1").jqGrid('setCell', rowid, 'BILLTYPE', '', { color: 'red' });
                          jQuery("#list1").jqGrid('setCell', rowid, 'QUANTITY', '', { color: 'red' });
                          jQuery("#list1").jqGrid('setCell', rowid, 'WEIGHT', '', { color: 'red' });
                          jQuery("#list1").jqGrid('setCell', rowid, 'VOLUME', '', { color: 'red' });
                          jQuery("#list1").jqGrid('setCell', rowid, 'PRICE', '', { color: 'red' });
                          jQuery("#list1").jqGrid('setCell', rowid, 'INSURED', '', { color: 'red' });
                          jQuery("#list1").jqGrid('setCell', rowid, 'PREMIUMS', '', { color: 'red' });
                      },
                      afterEditCell: function (rowid, cellname, value, iRow, iCol) {
                          if (cellname == 'PNAME') {
                              $("#" + iRow + "_" + cellname).dblclick(function () {
                                  tipsWindown("请选择品名", "iframe:goodsPOP.aspx?controlName=" + iRow + "_" + cellname, "455", "350", "true", "", "true", "leotheme");
                              });
                              return;
                          }
                          if (cellname == 'PACKAGE') return;
                          if (cellname == 'BILLTYPE') return;
                          $("#" + iRow + "_" + cellname)[0].select();
                      },
                      afterSaveCell: function (rowid, cellname, value, iRow, iCol) {
                          if ("PNAME" == cellname) return;
                          if ("PACKAGE" == cellname) return;
                          var billType = $("#list1").getCell(rowid, "BILLTYPE");
                          var oldAmount = getGridFieldSum("list1", "AMOUNT");
                          if ("BILLTYPE" == cellname) {
                              if ("按数量计费" == billType) {
                                  $("#list1").setCell(rowid, "FREIGHT", "" + parseFloat($("#list1").getCell(rowid, "QUANTITY")) * parseFloat($("#list1").getCell(rowid, "PRICE")));
                                  $("#list1").setCell(rowid, "AMOUNT", "" + (parseFloat($("#list1").getCell(rowid, "FREIGHT")) + parseFloat($("#list1").getCell(rowid, "INSURANCEFEE"))));
                                  $("#list1").footerData("set", { FREIGHT: "" + getGridFieldSum("list1", "FREIGHT") });
                                  $("#list1").footerData("set", { AMOUNT: "" + getGridFieldSum("list1", "AMOUNT") });
                                  //return;
                              }
                              else if ("按重量计费" == billType) {
                                  $("#list1").setCell(rowid, "FREIGHT", "" + parseFloat($("#list1").getCell(rowid, "WEIGHT")) * parseFloat($("#list1").getCell(rowid, "PRICE")));
                                  $("#list1").setCell(rowid, "AMOUNT", "" + (parseFloat($("#list1").getCell(rowid, "FREIGHT")) + parseFloat($("#list1").getCell(rowid, "INSURANCEFEE"))));
                                  $("#list1").footerData("set", { FREIGHT: "" + getGridFieldSum("list1", "FREIGHT") });
                                  $("#list1").footerData("set", { AMOUNT: "" + getGridFieldSum("list1", "AMOUNT") });
                                  //return;
                              }
                              else if ("按体积计费" == billType) {
                                  $("#list1").setCell(rowid, "FREIGHT", "" + parseFloat($("#list1").getCell(rowid, "VOLUME")) * parseFloat($("#list1").getCell(rowid, "PRICE")));
                                  $("#list1").setCell(rowid, "AMOUNT", "" + (parseFloat($("#list1").getCell(rowid, "FREIGHT")) + parseFloat($("#list1").getCell(rowid, "INSURANCEFEE"))));
                                  $("#list1").footerData("set", { FREIGHT: "" + getGridFieldSum("list1", "FREIGHT") });
                                  $("#list1").footerData("set", { AMOUNT: "" + getGridFieldSum("list1", "AMOUNT") });
                                  //return;
                              }
                              //return;
                          }
                          else if ("QUANTITY" == cellname) {
                              $("#list1").footerData("set", { QUANTITY: "" + getGridFieldSum("list1", cellname) });
                              if ("按数量计费" == billType) {
                                  $("#list1").setCell(rowid, "FREIGHT", "" + parseFloat($("#list1").getCell(rowid, "QUANTITY")) * parseFloat($("#list1").getCell(rowid, "PRICE")));
                                  $("#list1").setCell(rowid, "AMOUNT", "" + (parseFloat($("#list1").getCell(rowid, "FREIGHT")) + parseFloat($("#list1").getCell(rowid, "INSURANCEFEE"))));
                                  $("#list1").footerData("set", { FREIGHT: "" + getGridFieldSum("list1", "FREIGHT") });
                                  $("#list1").footerData("set", { AMOUNT: "" + getGridFieldSum("list1", "AMOUNT") });
                              }
                              //return;
                          }
                          else if ("WEIGHT" == cellname) {
                              $("#list1").footerData("set", { WEIGHT: "" + getGridFieldSum("list1", cellname) });
                              if ("按重量计费" == billType) {
                                  $("#list1").setCell(rowid, "FREIGHT", "" + parseFloat($("#list1").getCell(rowid, "WEIGHT")) * parseFloat($("#list1").getCell(rowid, "PRICE")));
                                  $("#list1").setCell(rowid, "AMOUNT", "" + (parseFloat($("#list1").getCell(rowid, "FREIGHT")) + parseFloat($("#list1").getCell(rowid, "INSURANCEFEE"))));
                                  $("#list1").footerData("set", { FREIGHT: "" + getGridFieldSum("list1", "FREIGHT") });
                                  $("#list1").footerData("set", { AMOUNT: "" + getGridFieldSum("list1", "AMOUNT") });
                              }
                              //return;
                          }
                          else if ("VOLUME" == cellname) {
                              $("#list1").footerData("set", { VOLUME: "" + getGridFieldSum("list1", cellname) });
                              if ("按体积计费" == billType) {
                                  $("#list1").setCell(rowid, "FREIGHT", "" + parseFloat($("#list1").getCell(rowid, "VOLUME")) * parseFloat($("#list1").getCell(rowid, "PRICE")));
                                  $("#list1").setCell(rowid, "AMOUNT", "" + (parseFloat($("#list1").getCell(rowid, "FREIGHT")) + parseFloat($("#list1").getCell(rowid, "INSURANCEFEE"))));
                                  $("#list1").footerData("set", { FREIGHT: "" + getGridFieldSum("list1", "FREIGHT") });
                                  $("#list1").footerData("set", { AMOUNT: "" + getGridFieldSum("list1", "AMOUNT") });
                              }
                              //return;
                          }
                          else if ("PRICE" == cellname) {
                              if ("按数量计费" == billType) {
                                  $("#list1").setCell(rowid, "FREIGHT", "" + parseFloat($("#list1").getCell(rowid, "QUANTITY")) * parseFloat($("#list1").getCell(rowid, "PRICE")));
                                  $("#list1").setCell(rowid, "AMOUNT", "" + (parseFloat($("#list1").getCell(rowid, "FREIGHT")) + parseFloat($("#list1").getCell(rowid, "INSURANCEFEE"))));
                                  $("#list1").footerData("set", { FREIGHT: "" + getGridFieldSum("list1", "FREIGHT") });
                                  $("#list1").footerData("set", { AMOUNT: "" + getGridFieldSum("list1", "AMOUNT") });
                                  //return;
                              }
                              else if ("按重量计费" == billType) {
                                  $("#list1").setCell(rowid, "FREIGHT", "" + parseFloat($("#list1").getCell(rowid, "WEIGHT")) * parseFloat($("#list1").getCell(rowid, "PRICE")));
                                  $("#list1").setCell(rowid, "AMOUNT", "" + (parseFloat($("#list1").getCell(rowid, "FREIGHT")) + parseFloat($("#list1").getCell(rowid, "INSURANCEFEE"))));
                                  $("#list1").footerData("set", { FREIGHT: "" + getGridFieldSum("list1", "FREIGHT") });
                                  $("#list1").footerData("set", { AMOUNT: "" + getGridFieldSum("list1", "AMOUNT") });
                                  //return;
                              }
                              else if ("按体积计费" == billType) {
                                  $("#list1").setCell(rowid, "FREIGHT", "" + parseFloat($("#list1").getCell(rowid, "VOLUME")) * parseFloat($("#list1").getCell(rowid, "PRICE")));
                                  $("#list1").setCell(rowid, "AMOUNT", "" + (parseFloat($("#list1").getCell(rowid, "FREIGHT")) + parseFloat($("#list1").getCell(rowid, "INSURANCEFEE"))));
                                  $("#list1").footerData("set", { FREIGHT: "" + getGridFieldSum("list1", "FREIGHT") });
                                  $("#list1").footerData("set", { AMOUNT: "" + getGridFieldSum("list1", "AMOUNT") });
                                  //return;
                              }
                              //return;
                          }
                          else if ("INSURED" == cellname) {
                              $("#list1").footerData("set", { INSURED: "" + getGridFieldSum("list1", cellname) });
                              $("#list1").setCell(rowid, "INSURANCEFEE", "" + (parseFloat($("#list1").getCell(rowid, "INSURED")) * parseFloat($("#list1").getCell(rowid, "PREMIUMS"))));
                              $("#list1").setCell(rowid, "AMOUNT", "" + (parseFloat($("#list1").getCell(rowid, "FREIGHT")) + parseFloat($("#list1").getCell(rowid, "INSURANCEFEE"))));
                              $("#list1").footerData("set", { INSURANCEFEE: "" + getGridFieldSum("list1", "INSURANCEFEE") });
                              $("#list1").footerData("set", { AMOUNT: "" + getGridFieldSum("list1", "AMOUNT") });
                              //return;
                          }
                          var newAmount = getGridFieldSum("list1", "AMOUNT");
                          var totalFee = $("#TOTALFEE").val();
                          if (isNullOrEmpty(totalFee)) totalFee = 0;
                          else totalFee = parseFloat(totalFee);
                          $("#TOTALFEE").val(newAmount - oldAmount + totalFee);
                      }
                  });
                  $("#t_list1").append("<input type='button' id='addRow' name='addRow' value='添加' style='height:25px;font-size:-3'/>");
                  $("#t_list1").append("<input type='button' id='delRow' name='delRow' value='删除' style='height:25px;font-size:-3'/>");
                  $("#list1").footerData("set", { PNAME: "汇总：", QUANTITY: "0", WEIGHT: "0", VOLUME: "0", FREIGHT: "0", INSURED: "0", INSURANCEFEE: "0", AMOUNT: "0" });                 //汇总行赋值   
                  //获取包装
                  xmlDom = getXMLDOM("method=select&type=XML.BILL.getGoodsList&DDFLD=PACKING");
                  var colModelArr = $("#list1").getGridParam("colModel");
                  var editoptionsObj = colModelArr[2]["editoptions"];
                  editoptionsObj["value"] = getDataList(xmlDom, "NAME");                   
                  //获取计费方式
                  xmlDom = getXMLDOM("method=select&type=XML.BILL.getGoodsList&DDFLD=BILLTYPE");
                  colModelArr = $("#list1").getGridParam("colModel");
                  editoptionsObj = colModelArr[3]["editoptions"];
                  editoptionsObj["value"] = getDataList(xmlDom, "NAME");
                  $("input[id=addRow]", "#t_list1").click(function () {
                      if ($("#list1").getGridParam("records") >= 3) {
                          alert("货物清单最多只能输入三行");
                          return;
                      }
                      var datarow = { BILLTYPE: "按重量计费", PREMIUMS: insuranceRate };
                      var su = jQuery("#list1").jqGrid('addRowData', new Date().valueOf(), datarow);
                  });
 
                  $("input[id=delRow]", "#t_list1").click(function () {
                      var id = jQuery("#list1").getGridParam('selrow');
                      if (id) {
                          var su = jQuery("#list1").jqGrid('delRowData', id);
                          if (su) {
                              $("#list1").footerData("set", { QUANTITY: "" + getGridFieldSum("list1", "QUANTITY") });
                              $("#list1").footerData("set", { WEIGHT: "" + getGridFieldSum("list1", "WEIGHT") });
                              $("#list1").footerData("set", { VOLUME: "" + getGridFieldSum("list1", "VOLUME") });
                              $("#list1").footerData("set", { FREIGHT: "" + getGridFieldSum("list1", "FREIGHT") });
                              $("#list1").footerData("set", { INSURED: "" + getGridFieldSum("list1", "INSURED") });
                              $("#list1").footerData("set", { INSURANCEFEE: "" + getGridFieldSum("list1", "INSURANCEFEE") });
                              $("#list1").footerData("set", { AMOUNT: "" + getGridFieldSum("list1", "AMOUNT") });
                          }
                          else {
                              alert("无法删除");
                          }
                      }
                      else alert("请选择一笔记录");
                  });
              });
 
//数量判断
function quantity_Check()
{
    if(!NumCheck2(arguments[0]))
        return [false,"数量必须为正整数"];
    else
        return [true];
}
 
//正数判断
function deci_Check()
{
    if(NumCheck(arguments[0]))
    {        
        return [true];
    }
    else return [false,arguments[1]+"数值必须为正数"];
}
//关闭弹出窗口
function closeWin()
{
    $("#windownbg").remove();
         $("#windown-box").fadeOut("fast",function(){$(this).remove();});
}
//obj为XML DOM对象
function getDataList(obj, fieldName)
{
    if(!obj) return "";
    var rowNum = parseInt(getFieldValue(obj, "rowCount"));
    if(0 == rowNum) return "";
    var dataList = "";
    for(var i=0; i<rowNum; i++)
    {
        dataList += getFieldValue(obj, fieldName, i) + ";";
    }
    if (!isNullOrEmpty(dataList)) dataList = dataList.substring(0, dataList.length - 1);
    return dataList;   
}
//验证jqGrid数据
function checkGrid(gridId, fieldName)
{
    if(isNullOrEmpty(gridId))
    {
        parent.showMessage("gridId参数为空");
        return false;
    }
    var records = $("#"+gridId).getGridParam('records');             //获取jqgrid行数
    if(records==0) return true;
    for(var i=0; i<records; i++)
    {
        var colArr = $("#"+gridId).getGridParam("colModel");     
        var rowidArr = $("#"+gridId).getDataIDs(); 
        for(var j=0; j<colArr.length; j++)
        {
            var colName = colArr[j]["name"];
            switch(colName)
            {
                case "PNAME":
                    if(isNullOrEmpty($("#"+gridId).getCell(rowidArr[i], colName)))
                    {
                        parent.showMessage("第"+(i+1)+"行的【品名】为空");
                        return false;
                    }
                    break;
                case "PACKAGE":
                    if(isNullOrEmpty($("#"+gridId).getCell(rowidArr[i], colName)))
                    {
                        parent.showMessage("第"+(i+1)+"行的【包装】为空");
                        return false;
                    }
                    break;
                case "BILLTYPE":
                    if(isNullOrEmpty($("#"+gridId).getCell(rowidArr[i], colName)))
                    {
                        parent.showMessage("第"+(i+1)+"行的【计费类型】为空");
                        return false;
                    }
                    break;
                case "QUANTITY":
                    if($("#"+gridId).getCell(rowidArr[i], "BILLTYPE")=="按数量计费")
                    {
                        if(parseFloat($("#"+gridId).getCell(rowidArr[i], colName))<=0)
                        {
                            parent.showMessage("第"+(i+1)+"行的【数量】为零");
                            return false;
                        }  
                    }                   
                    break;                   
                case "WEIGHT":
                    if($("#"+gridId).getCell(rowidArr[i], "BILLTYPE")=="按重量计费")
                    {
                        if(parseFloat($("#"+gridId).getCell(rowidArr[i], colName))<=0)
                        {
                            parent.showMessage("第"+(i+1)+"行的【重量】为零");
                            return false;
                        }  
                    }                   
                    break;                   
                case "VOLUME":
                    if($("#"+gridId).getCell(rowidArr[i], "BILLTYPE")=="按体积计费")
                    {
                        if(parseFloat($("#"+gridId).getCell(rowidArr[i], colName))<=0)
                        {
                            parent.showMessage("第"+(i+1)+"行的【体积】为零");
                            return false;
                        }
                    }                   
                    break;                   
               case "PRICE":
                    if(isNullOrEmpty($("#"+gridId).getCell(rowidArr[i], colName)))
                    {
                        parent.showMessage("第"+(i+1)+"行的【单价】为零");
                        return false;
                    }
                    break;
            }           
        }
    }
    return true;
}


运行正常后，显示如下：

 

录入数据显示如下：

 

由于时间仓促，写得比较粗糙，有时间再改正。

 

bill.js下载地址：http://d.download.csdn.net/down/3018639/ddxkjddx

 

adagadadfafd
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
【jqgrid】简单封装
blackbeauty1024的专栏
03-02 3568
如果要实现上面的grid，使用原生的jqgrid如下： function queryUser(){ $("#testJqgrid").trigger("reloadGrid",[{page:1}]); } $(function(){ initGrid(); }); function initGrid(){ $("#testJqgrid").jqGrid({ datat
jqGrid构造下拉表格控件 dropDownGrid -ace Admin
zrk1000的专栏
06-19 8186
使用ace Admin开发过程中使用modal（模态框）弹出表单，输入框需要从数据库其他表中取值填充，一般情况下select或更方便的chosen就可以；若需要在下拉中显示多列，chosen就满足不，若在modal中再弹modal会影响底层modal的滚动事件，多层modal不是好的选择；还是自己封装个来的简单明了。
JQGrid导出Excel文件
weixin_33862993的博客
01-09 449
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数、ColModel API、事件及方法 Web jquery表格组件 JQGrid 的使用 - 5.Pager翻页、搜索、格式化、自定义按钮 Web jquery表格组件 JQGrid 的使用 - 6.准备工作 &amp; Hell...
Jqgrid表格控件导出excel文件
ruixing222的专栏
09-03 5005
Jqgrid导出excel实现思路： 1、根据jqgrid表头样式，使用jquery获取表头样式。为保证对合并单元格表头的兼容，实现中没有使用到jqgrid原声api获取colName等信息。 2、导出文件内容使用xml格式文件。 3、在前头页面生成文件内容，然后将生成文件内容发送到服务端，由服务端生成文件下载。（也有很多直接使用前台下载方式，前台下载目前大多具有浏览器限制问题） /*...
JqGrid单元格编辑配置方法
最新发布
木杨的博客
08-16 765
需要配置的是cellEdit、cellurl、cellsubmit三个字段（ajaxCellOptions）。
jqGrid实现类似Excel录入功能
09-10
jqGrid 实现类似 Excel 录入功能 在本篇文章中，我们将学习如何使用 jqGrid 实现类似 Excel 录入功能。jqGrid 是一个免费且功能强大的 web 网格控件，官方提供了十分丰富的 API，几乎可以满足项目中数据展示、统计...
利用jqgrid实现上移下移单元格功能
10-17
在本文中，我们将深入探讨如何使用jqGrid，一个基于jQuery的表格插件，来实现单元格的上移和下移功能。jqGrid提供了一种高效且灵活的方式来展示和操作表格数据，包括与服务器端的数据交互。当我们需要调整表格中数据...
jqgrid实现简单的单行编辑功能
08-29
jQGrid 实现简单的单行编辑功能 jQGrid 是一个功能强大且灵活的网格控件，可以实现各种复杂的数据展示和编辑功能。本文将主要介绍如何使用 jQGrid 实现简单的单行编辑功能。 首先，需要在 HTML 文件中添加一个表格...
jqGrid控件导入导出Excel文件
11-15
jqGrid控件导入导出Excel文件，将几个jqgrid导出一份Excel多sheet文件 ，亦可多sheet的excel导入至多个jqGrid表格。
jquery.jqGrid.js顶部工具栏扩展
04-24
jqGrid顶部工具栏扩展，可将导航按钮及自定义按钮添加到表格的顶部，使用方法见https://blog.csdn.net/liandi_123456/article/details/89501692
jqGrid (数据表格)
翰萨姆的博客
08-12 2119
jqGrid (数据表格) 1.使用jqgrid数据表格 1). 环境搭建 官方下载: http://www.trirand.com/blog/ 中文网下载: http://blog.mn886.net/jqGrid/ 2). 如何使用 1.解压压缩包 核心文件夹: jqgrid 2.页面中使用 引入jqgrid中核心css 引入jqgrid中国际化语言文件 引入jqgrid中核心js文件 <link rel="stylesheet" href="${app}
jqgrid 单元格编辑
chuncui2576的博客
03-16 758
` cellEdit: true, //启用单元格编辑功能， cellurl: _ctxPath + "/pfmcePlan/info/hrEffLeader/saveCell.do", loadComplete: function() { var table = th...
jqGrid 实现表格导出Excel功能
旭东怪的博客
09-28 2616
1、实现代码 /** * * function jqgridtoExcel (Table,Tal,fileName) * @param Table 表头table的父div-父div-父div * @param Tal jqgrid的tableid * @param filename Excel文件名称 * example：jqgirdtpExcel($("#gview_group-report4"),$("#group-report4"),fileName); * **/ (function.
jqgrid导出excel文档
dsn727455218的博客
04-10 2082
        最近一个项目中需要把jqgrid的数据导出成excel文档，所以去查询一下jq的文档，它所提供的接口是需要收费的，当时我就一脸嫌弃的表情。        无奈之举只能自己想办法了，前思后想，突然灵光一闪，可以把数据提交到后台通过后台写出到文档。        首先我封装了一个js把jq的数据提交的后台，下面我们来看看这个封装的js：        function getXlsFr...
Jqgrid入门-操作表格的数据(二)
aichuxia4449的博客
06-27 349
上一篇中，Jqgrid已经可以从服务端获得数据，并显示在Grid表格中了。下面说一下，如何操作表格及其数据。 jqGrid有很多方法函数，用来操作数据或者操作Grid表格本身。jqGrid的方法有两种调用方式： $(“#grid_id”).jqGridMethod( parameter1,…,parameterN ); 或者 ...
JQGrid 动态添加 Select
abc_1234567890_abc的博客
10-26 5101
JQGrid 动态添加 Select 下拉框 在JQGrid 添加下拉框通常是这样做的, { name : 'week', index : 'week', label : '周', width : 110,
利用可变长度参数定义一个函数，输入为任意个数的数值，功能为对输入数据求和并输出；
weixin_51343683的博客
10-16 3442
** -利用可变长度参数定义一个函数，输入为任意个数的数值，功能为对输入数据求和并输出； -在main函数中，测试函数的功能。 def theSum(*p): # 接收任意多个实参并将其放入一个元组中 求和函数 lst = p[0] # 取第一个元素 列表 sum = 0 for i in range(0, len(lst)): sum = sum + int(lst[i]) print(sum) def main(): print("请输入数
jqGrid导出excel
weixin_30555753的博客
08-11 690
项目中经常需要将查找出来的jqGrid表单导出成excel，原先的做法就是跳转到后端然后通过数据库中再查找一次然后用POI导出。 后来需要查找的表格多了一系列问题也就出来了: 1.每次的导出栏不一样都要针对性的对代码进行修改。 2.如果数据查询复杂的话无疑增加了数据库的负担，以及导出的等待时长。 于是我就开始考虑查找js导出的相关插件，网上有关内容相对比较少，但是功夫不负有心人终...
jqgrid 设置colMenu 怎么实现记忆功能
06-12
要实现jqGrid colMenu的记忆功能，可以通过以下步骤来操作： 1. 使用`colMenu`选项定义自定义菜单，将菜单项的状态存储在Cookie中。 2. 在菜单项被点击时，更新Cookie中的状态。 3. 在jqGrid的`loadComplete`事件...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值