BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤

bootstrap-fileinput源码:https://github.com/kartik-v/bootstrap-fileinput

bootstrap-fileinput在线API:http://plugins.krajee.com/file-input

bootstrap-fileinput Demo展示:http://plugins.krajee.com/file-basic-usage-demo

这个插件主要是介绍如何处理图片上传的处理操作,原先我的Excel导入操作使用的是Uploadify插件,可以参考我随笔《附件上传组件uploadify的使用》,不过这个需要Flash控件支持,在某些浏览器(如Chrome)就比较麻烦了,因此决定使用一种较为通用的上传插件,这次首先对基于Bootstrap前端架构的框架系统进行升级,替代原来的Uploadify插件,这样页面上传功能,在各个浏览器就可以无差异的实现了。

一般情况下,我们需要引入下面两个文件,插件才能正常使用:

bootstrap-fileinput/css/fileinput.min.css
bootstrap-fileinput/js/fileinput.min.js

在File input 插件使用的时候,如果是基于Asp.NET MVC的,那么我们可以使用BundleConfig.cs进行添加对应的引用,加入到Bundles集合引用即可。

 //添加对bootstrap-fileinput控件的支持
 css_metronic.Include("~/Content/MyPlugins/bootstrap-fileinput/css/fileinput.min.css");
 js_metronic.Include("~/Content/MyPlugins/bootstrap-fileinput/js/fileinput.min.js");
 js_metronic.Include("~/Content/MyPlugins/bootstrap-fileinput/js/locales/zh.js");

在页面中,我们使用以下HTML代码实现界面展示,主要的bootstrap fileinput插件声明,主要是基础的界面代码

<input id="excelFile" type="file">

Excel导入的的界面展示如下所示。

选择指定文件后,我们可以看到Excel的文件列表,如下界面所示。

上传文件后,数据直接展示在弹出层的列表里面,这里直接使用了 Bootstrap-table表格插件进行展示。

这样我们就可以把Excel的记录展示出来,实现了预览的功能,勾选必要的记录,然后保存即可提交到服务器进行保存,实现了Excel数据的真正导入数据库处理。

2、Excel导出操作详细介绍

我们在实际导入Excel的界面中,HTML代码如下所示。

<!--导入数据操作层-->
<div id="import" class="modal fade bs-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog modal-lg">
 <div class="modal-content">
 <div class="modal-header bg-primary">
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
 <h4 class="modal-title">文件导入</h4>
 </div>
 <div class="modal-body">
 <div style="text-align:right;padding:5px">
  <a href="~/Content/Template/TestUser-模板.xls" rel="external nofollow" onclick="javascript:Preview();">
  <img alt="测试用户信息-模板" src="~/Content/images/ico_excel.png" />
  <span style="font-size:larger;font-weight:200;color:red">TestUser-模板.xls</span>
  </a>
 </div>
 <hr/>
 <form id="ffImport" method="post">
  <div title="Excel导入操作" style="padding: 5px">
  <input type="hidden" id="AttachGUID" name="AttachGUID" />
  <input id="excelFile" type="file">
  </div>
 </form>
 <!--数据显示表格-->
 <table id="gridImport" class="table table-striped table-bordered table-hover" cellpadding="0" cellspacing="0" border="0">
 </table>
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
 <button type="button" class="btn btn-primary" onclick="SaveImport()">保存</button>
 </div>
 </div>
 </div>
</div>

对于bootstrap fileinput的各种属性,我们这里使用JS进行初始化,这样方便统一管理和修改。

 //初始化Excel导入的文件
 function InitExcelFile() {
 //记录GUID
 $("#AttachGUID").val(newGuid());
 $("#excelFile").fileinput({
 uploadUrl: "/FileUpload/Upload",//上传的地址
 uploadAsync: true, //异步上传
 language: "zh",  //设置语言
 showCaption: true, //是否显示标题
 showUpload: true, //是否显示上传按钮
 showRemove: true, //是否显示移除按钮
 showPreview : true, //是否显示预览按钮
 browseClass: "btn btn-primary", //按钮样式
 dropZoneEnabled: false, //是否显示拖拽区域
 allowedFileExtensions: ["xls", "xlsx"], //接收的文件后缀
 maxFileCount: 1,  //最大上传文件数限制
 previewFileIcon: '<i class="glyphicon glyphicon-file"></i>',
 allowedPreviewTypes: null,
 previewFileIconSettings: {
  'docx': '<i class="glyphicon glyphicon-file"></i>',
  'xlsx': '<i class="glyphicon glyphicon-file"></i>',
  'pptx': '<i class="glyphicon glyphicon-file"></i>',
  'jpg': '<i class="glyphicon glyphicon-picture"></i>',
  'pdf': '<i class="glyphicon glyphicon-file"></i>',
  'zip': '<i class="glyphicon glyphicon-file"></i>',
 },
 uploadExtraData: { //上传的时候,增加的附加参数
  folder: '数据导入文件', guid: $("#AttachGUID").val()
 }
 }) //文件上传完成后的事件
 .on('fileuploaded', function (event, data, previewId, index) {
 var form = data.form, files = data.files, extra = data.extra,
  response = data.response, reader = data.reader;
 var res = data.response; //返回结果
 if (res.Success) {
  showTips('上传成功');
  var guid = $("#AttachGUID").val();
  //提示用户Excel格式是否正常,如果正常加载数据
  $.ajax({
  url: '/TestUser/CheckExcelColumns?guid=' + guid,
  type: 'get',
  dataType: 'json',
  success: function (data) {
  if (data.Success) {
  InitImport(guid); //重新刷新表格数据
  showToast("文件已上传,数据加载完毕!");
  //重新刷新GUID,以及清空文件,方便下一次处理
  RefreshExcel();
  }
  else {
  showToast("上传的Excel文件检查不通过。请根据页面右上角的Excel模板格式进行数据录入。", "error");
  }
  }
  });
 }
 else {
  showTips('上传失败');
 }
 });
 }

上面的逻辑具体就是,设置上传文件的后台页面为:/FileUpload/Upload,以及各种插件的配置参数,uploadExtraData里面设置的是提交的附加参数,也就是后台控制器接收的参数,其中

.on('fileuploaded', function (event, data, previewId, index) {

的函数处理文件上传后的处理函数,如果上传文件返回的结果是成功的,那么我们再次调用ajax来检查这个Excel的字段是否符合要求,如下地址:

url: '/TestUser/CheckExcelColumns?guid=' + guid,

如果这个检查的后台返回成功的记录,那么再次需要把Excel记录提取出来预览,并清空bootstrap fileinput文件上传插件,方便下次上传文件。如下代码所示。

 if (data.Success) {
 InitImport(guid); //重新刷新表格数据
 showToast("文件已上传,数据加载完毕!");
 //重新刷新GUID,以及清空文件,方便下一次处理
 RefreshExcel();
 }
 else {
 showToast("上传的Excel文件检查不通过。请根据页面右上角的Excel模板格式进行数据录入。", "error");
 }

其中RefreshExcel就是重新更新上传的附加参数值,方便下次上传,否则附加参数的值一直不变化,就会导致我们设置的GUID没有变化而出现问题。

 //重新更新GUID的值,并清空文件
 function RefreshExcel() {
 $("#AttachGUID").val(newGuid());
 $('#excelFile').fileinput('clear');//清空所有文件
 //附加参数初始化后一直不会变化,如果需要发生变化,则需要使用refresh进行更新
 $('#excelFile').fileinput('refresh', {
 uploadExtraData: { folder: '数据导入文件', guid: $("#AttachGUID").val() },
 });
 }

而其中InitImport就是获取预览数据并展示在Bootstrap-table表格插件上的,关于这个插件的详细使用,可以回顾下随笔《基于Metronic的Bootstrap开发框架经验总结(16)-- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理》进行了解即可。

 //根据条件查询并绑定结果
 var $import;
 function InitImport(guid) {
 var url = "/TestUser/GetExcelData?guid=" + guid;
 $import = $('#gridImport').bootstrapTable({
 url: url,  //请求后台的URL(*)
 method: 'GET',  //请求方式(*)
 striped: true,  //是否显示行间隔色
 cache: false,  //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
 pagination: false,  //是否显示分页(*)
 sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*)
 pageNumber: 1,  //初始化加载第一页,默认第一页,并记录
 pageSize: 100,  //每页的记录行数(*)
 pageList: [10, 25, 50, 100], //可供选择的每页的行数(*)
 search: false,  //是否显示表格搜索
 strictSearch: true,
 showColumns: true,  //是否显示所有的列(选择显示的列)
 showRefresh: true,  //是否显示刷新按钮
 minimumCountColumns: 2, //最少允许的列数
 clickToSelect: true, //是否启用点击选中行
 uniqueId: "ID",  //每一行的唯一标识,一般为主键列
 queryParams: function (params) { },
 columns: [{
  checkbox: true,
  visible: true  //是否显示复选框
 }, {
  field: 'Name',
  title: '姓名'
 }, {
  field: 'Mobile',
  title: '手机'
 }, {
  field: 'Email',
  title: '邮箱',
  formatter: emailFormatter
 }, {
  field: 'Homepage',
  title: '主页',
  formatter: linkFormatter
 }, {
  field: 'Hobby',
  title: '兴趣爱好'
 }, {
  field: 'Gender',
  title: '性别',
  formatter: sexFormatter
 }, {
  field: 'Age',
  title: '年龄'
 }, {
  field: 'BirthDate',
  title: '出生日期',
  formatter: dateFormatter
 }, {
  field: 'Height',
  title: '身高'
 }, {
  field: 'Note',
  title: '备注'
 }],
 onLoadSuccess: function () {
 },
 onLoadError: function () {
  showTips("数据加载失败!");
 },
 });
 }

最后就是确认提交后,会通过JS提交数据到后台进行处理,如下代码所示。

 //保存导入的数据
 function SaveImport() {
 var list = [];//构造集合对象
 var rows = $import.bootstrapTable('getSelections');
 for (var i = 0; i < rows.length; i++) {
 list.push({
  'Name': rows[i].Name, 'Mobile': rows[i].Mobile, 'Email': rows[i].Email, 'Homepage': rows[i].Homepage,
  'Hobby': rows[i].Hobby, 'Gender': rows[i].Gender, 'Age': rows[i].Age, 'BirthDate': rows[i].BirthDate,
  'Height': rows[i].Height, 'Note': rows[i].Note
 });
 }
 if (list.length == 0) {
 showToast("请选择一条记录", "warning");
 return;
 }
 var postData = { 'list': list };//可以增加其他参数,如{ 'list': list, 'Rucanghao': $("#Rucanghao").val() };
 postData = JSON.stringify(postData);
 $.ajax({
 url: '/TestUser/SaveExcelData',
 type: 'post',
 dataType: 'json',
 contentType: 'application/json;charset=utf-8',
 traditional: true,
 success: function (data) {
  if (data.Success) {
  //保存成功 1.关闭弹出层,2.清空记录显示 3.刷新主列表
  showToast("保存成功");
  $("#import").modal("hide");
  $(bodyTag).html("");
  Refresh();
  }
  else {
  showToast("保存失败:" + data.ErrorMessage, "error");
  }
 },
 data: postData
 });
 }

3、后台控制器代码分析

这里我们的JS代码里面,涉及了几个MVC后台的方法处理:Upload、CheckExcelColumns、GetExcelData、SaveExcelData。这里分别进行介绍。

文件上传的后台控制器方法如下所示。

 /// <summary>
 /// 上传附件到服务器上
 /// </summary>
 /// <param name="fileData">附件信息</param>
 /// <param name="guid">附件组GUID</param>
 /// <param name="folder">指定的上传目录</param>
 /// <returns></returns>
 [AcceptVerbs(HttpVerbs.Post)]
 public ActionResult Upload(string guid, string folder)
 {
 CommonResult result = new CommonResult();
 HttpFileCollectionBase files = HttpContext.Request.Files;
 if (files != null)
 {
 foreach (string key in files.Keys)
 {
  try
  {
  #region MyRegion
  HttpPostedFileBase fileData = files[key];
  if (fileData != null)
  {
  HttpContext.Request.ContentEncoding = Encoding.GetEncoding("UTF-8");
  HttpContext.Response.ContentEncoding = Encoding.GetEncoding("UTF-8");
  HttpContext.Response.Charset = "UTF-8";
  // 文件上传后的保存路径
  string filePath = Server.MapPath("~/UploadFiles/");
  DirectoryUtil.AssertDirExist(filePath);
  string fileName = Path.GetFileName(fileData.FileName); //原始文件名称
  string fileExtension = Path.GetExtension(fileName); //文件扩展名
  //string saveName = Guid.NewGuid().ToString() + fileExtension; //保存文件名称
  FileUploadInfo info = new FileUploadInfo();
  info.FileData = ReadFileBytes(fileData);
  if (info.FileData != null)
  {
  info.FileSize = info.FileData.Length;
  }
  info.Category = folder;
  info.FileName = fileName;
  info.FileExtend = fileExtension;
  info.AttachmentGUID = guid;
  info.AddTime = DateTime.Now;
  info.Editor = CurrentUser.Name;//登录人
  result = BLLFactory<FileUpload>.Instance.Upload(info);
  if (!result.Success)
  {
  LogTextHelper.Error("上传文件失败:" + result.ErrorMessage);
  }
  }
  #endregion
  }
  catch (Exception ex)
  {
  result.ErrorMessage = ex.Message;
  LogTextHelper.Error(ex);
  }
 }
 }
 else
 {
 result.ErrorMessage = "fileData对象为空";
 }
 return ToJsonContent(result);
 }

文件上传处理后,返回一个通用的CommonResult 的结果对象,也方便我们在JS客户端进行判断处理。

而其中检查我们导入Excel的数据是否满足列要求的处理,就是判断它的数据列和我们预先设置好的列名是否一致即可。

 //导入或导出的字段列表
 string columnString = "姓名,手机,邮箱,主页,兴趣爱好,性别,年龄,出生日期,身高,备注";
 /// <summary>
 /// 检查Excel文件的字段是否包含了必须的字段
 /// </summary>
 /// <param name="guid">附件的GUID</param>
 /// <returns></returns>
 public ActionResult CheckExcelColumns(string guid)
 {
 CommonResult result = new CommonResult();
 try
 {
 DataTable dt = ConvertExcelFileToTable(guid);
 if (dt != null)
 {
  //检查列表是否包含必须的字段
  result.Success = DataTableHelper.ContainAllColumns(dt, columnString);
 }
 }
 catch (Exception ex)
 {
 LogTextHelper.Error(ex);
 result.ErrorMessage = ex.Message;
 }
 return ToJsonContent(result);
 }

而GetExcelData则是格式化Excel数据到具体的List<TestUserInfo>集合里面,这样我们方便在客户端进行各种属性的操作,它的代码如下所示。

 /// <summary>
 /// 获取服务器上的Excel文件,并把它转换为实体列表返回给客户端
 /// </summary>
 /// <param name="guid">附件的GUID</param>
 /// <returns></returns>
 public ActionResult GetExcelData(string guid)
 {
 if (string.IsNullOrEmpty(guid))
 {
 return null;
 }
 List<TestUserInfo> list = new List<TestUserInfo>();
 DataTable table = ConvertExcelFileToTable(guid);
 if (table != null)
 {
 #region 数据转换
 int i = 1;
 foreach (DataRow dr in table.Rows)
 {
  bool converted = false;
  DateTime dtDefault = Convert.ToDateTime("1900-01-01");
  DateTime dt;
  TestUserInfo info = new TestUserInfo();
  info.Name = dr["姓名"].ToString();
  info.Mobile = dr["手机"].ToString();
  info.Email = dr["邮箱"].ToString();
  info.Homepage = dr["主页"].ToString();
  info.Hobby = dr["兴趣爱好"].ToString();
  info.Gender = dr["性别"].ToString();
  info.Age = dr["年龄"].ToString().ToInt32();
  converted = DateTime.TryParse(dr["出生日期"].ToString(), out dt);
  if (converted && dt > dtDefault)
  {
  info.BirthDate = dt;
  }
  info.Height = dr["身高"].ToString().ToDecimal();
  info.Note = dr["备注"].ToString();
  info.Creator = CurrentUser.ID.ToString();
  info.CreateTime = DateTime.Now;
  info.Editor = CurrentUser.ID.ToString();
  info.EditTime = DateTime.Now;
  list.Add(info);
 }
 #endregion
 }
 var result = new { total = list.Count, rows = list };
 return ToJsonContent(result);
 }

另一个SaveExcelData的函数就是处理数据导入的最终处理函数,主要就是把集合写入到具体的数据库里面即可,具体代码如下所示。

 /// <summary>
 /// 保存客户端上传的相关数据列表
 /// </summary>
 /// <param name="list">数据列表</param>
 /// <returns></returns>
 public ActionResult SaveExcelData(List<TestUserInfo> list)
 {
 CommonResult result = new CommonResult();
 if (list != null && list.Count > 0)
 {
 #region 采用事务进行数据提交
 DbTransaction trans = BLLFactory<TestUser>.Instance.CreateTransaction();
 if (trans != null)
 {
  try
  {
  //int seq = 1;
  foreach (TestUserInfo detail in list)
  {
  //detail.Seq = seq++;//增加1
  detail.CreateTime = DateTime.Now;
  detail.Creator = CurrentUser.ID.ToString();
  detail.Editor = CurrentUser.ID.ToString();
  detail.EditTime = DateTime.Now;
  BLLFactory<TestUser>.Instance.Insert(detail, trans);
  }
  trans.Commit();
  result.Success = true;
  }
  catch (Exception ex)
  {
  LogTextHelper.Error(ex);
  result.ErrorMessage = ex.Message;
  trans.Rollback();
  }
 }
 #endregion
 }
 else
 {
 result.ErrorMessage = "导入信息不能为空";
 }
 return ToJsonContent(result);
 }

上面这几个函数的代码一般是比较有规律的,不需要一个个去编写,一般通过代码生成工具Database2Sharp批量生成即可。这样可以有效提高Web的界面代码和后台代码的开发效率,减少出错的机会。

整个导入Excel数据的处理过程,所有代码都贴出来了,基本上整个逻辑了解了就可以很好的了解这个过程的代码了。

总结

以上所述是小编给大家介绍的BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

时间: 2017-08-04

el表达式 写入bootstrap表格数据页面的实例代码

el表达式,写入bootstrap表格,简化代码,效果图: 不多说,上干货: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.

bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法

异步请求 var postData = { "env_name" : new_env_name, "env_url": new_env_url, "env_desc" : new_env_desc }; $.ajax({ type: 'POST', url : '/test_env_add/', data : postData, dataType : 'json', success : function(data){ $('#table_test

Bootstrap Table表格一直加载(load)不了数据的快速解决方法

bootstrap-table是一个基于Bootstrap风格的强大的表格插件神器,官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 这里列出遇到的一个小问题:Bootstrap Table表格一直加载不了数据. $("#button").click(function(){ var name=$("input[name='name']").val(); $('#table').bootstrapTable('load

Angualrjs和bootstrap相结合实现数据表格table

AngularJS的数据表格 需要使用angualarjs.bootstrap.dirPagination.js 效果图: 1.html部分 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="app"> <head> <meta http-equiv="Content-Type" content="te

BootStrap数据表格实例代码

首先初始化页面 $(function(){ $('#archives-table').bootstrapTable({ url: "/coinSend/list",//数据源 dataField: "rows",//服务端返回数据键值 就是说记录放的键值是rows,分页时使用总记录数的键值为total search: true,//是否搜索 cache: false, striped: true, pagination: true,//是否分页 sortable:

bootstrap table 数据表格行内修改的实现代码

js中设置列的属性 editable : { type : 'text',//数据显示在文本框内 emptytext : "--",//数据为空时显示 validate : function(value) { if ($.trim(value) == '') { return '不能为空';//修改是数据为空 显示 } } } js中设置bootstrop-table加载数据时属性 onEditableSave : function(field, row, oldValue, $el)

BootStrap table实现表格行拖拽效果

本文实例为大家分享了BootStrap table实现表格行拖拽的具体代码,供大家参考,具体内容如下 不上图了 首先还是得添加三个文件,自己上网搜搜就行 <script src="~/Content/bootstrap-table/jquery.tablednd.js"></script> <script src="~/Content/bootstrap-table/bootstrap-table-reorder-rows.js">

BootStrap table删除指定行的注意事项(笔记整理)

这里一定要做一个笔记,这个问题花了好几个小时,问题虽小,但是从中获得一定经验. 问题:对于table指定行的数据进行删除,仅仅是前端实现! 方法有两种: 1.使用官方文档的数据(反正我试了2个小时都不行,如有大神请指导下):使用events和operate相结合的方式 2.不使用events,在formatter里面定义事件的实现. 上面的例子只是一个细节点,bootstrap-table是一个基于Bootstrap的jQuery插件,可以实现从数据库中提取数据到前端进行相应操作的功能,很好用!

使用layui 渲染table数据表格的实例代码

先上最终效果图: 1,引入layui的css和js文件 <link rel="stylesheet" href="lib/layui/css/layui.css" rel="external nofollow" > <script src="lib/layui/layui.js"></script> 2,在页面放置一个table元素 <table class="layui-h

layui框架table 数据表格的方法级渲染详解

如下所示: <table class="layui-table" lay-filter="demo11" id="test11"></table> //js 规范书写 var tst=table.render({ elem: '#test11' ,cols: [[ //标题栏 {checkbox: true} ,{field: 'pay_ct_time', title: '创建时间', width: 80} ,{field

JS组件Bootstrap Table表格行拖拽效果实现代码

一.业务需求及实现效果 项目涉及到订单模块,那天突然接到一个需求,说是两种不同状态的订单之间要实现插单的效果,页面上呈现方式是:左右两个Table,左边Table里面是状态为1的订单,右边Table里面是状态为2订单,左边Table里面的行数据拖动到右边Table里面指定行的位置,拖动完成后,左边表格减少一行,右边表格增加一行.除此之外,还需要撤销操作(相当于Ctrl + Z操作),能够返回到上一步的状态.可能描述会让大家模拟两可,反正已经实现了,先来看看效果图吧. 1.先看看拖动之前的效果 2

bootstrap table实现iview固定列的效果实例代码详解

因为bootstrap自带的固定列效果满足不了公司需求,所以借助fixed-table这个插件完成了iview固定列的效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>左右两侧固定列,中间内容可以横向拖动</title> <link rel="stylesheet" hr

Ajax遍历jSon后对每一条数据进行相应的修改和删除(代码分享)

废话不多说了,直接给大家贴代码了,具体代码如下所示: $.ajax({ url: "/business/findpersons.json", dataType: "json", type:"GET", success: function(doc) { var objs=eval(doc); for (var i = 0; i < objs.length; i++){ var personid=objs[i].personId; var na

VUE+Element UI实现简单的表格行内编辑效果的示例的代码

原理是通过Css控制绑定的输入控件与显示值,在选中行样式下对控件进行隐藏或显示 效果示例地址 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.c

bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题

前言 最近在研究bootstrap table的表格的单元格编辑功能,实现点击单元格修改内容,其中包括文本(text)方式修改,下拉选择(select)方式修改,日期(date)格式修改等. 本文着重解决x-editable编辑的数据动态添加和显示数据为Empty的问题,还有给表格单元格的内容设置多样式,使得显示多样化. 由于官网给的demo的数据都是html文件里写好的,select类型的不能动态添加(所以网上的大多都是官网的类似例子,本篇博客就是在这种情况下以自己的经验分享给大家,有问题可以