关于Datatable设置某列为option选项列

来源：互联网发布：javascript例子编辑：程序博客网时间：2024/06/06 13:21

Datable初始化后通过ajax传参得到返回数据（格式一般为json字符串），通过变量对应将返回的数据添加到datatable中。

关于ajax传参得到返回数据然后添加至table中的方法：

http://datatables.club/example/#ajax

要设置某一列为自定义格式（input、button、select等），需要用到columns.render渲染，columnDefs自定义某列。

前台datatable初始化:

  $(document).ready(function () {            var wf_entity = "@ViewBag.WF_NAME";            $("thead").css("background", "#7CCD7C");            var t = $('#example').DataTable({                "bJQueryUI": true,                "sScrollY": 150,     //设置Datatable垂直高度                "scrollX": true,     // 添加水平滚动条                "bProcessing": true,                  autoWidth: true,     //设置自动宽度开关，当需要水平滚动条、或者需要超过一屏显示的时候则打开                "bPaginate": true, //是否显示（应用）分页器                "oLanguage": {                    "sProcessing": "<img src='/images/loading.gif'>  努力加载数据中.", "sLengthMenu": "显示 _MENU_ 条",                    "sZeroRecords": "没有您要搜索的内容",                    "sInfo": "从 _START_ 到  _END_ 条记录 总记录数为 _TOTAL_ 条",                    "sInfoEmpty": "记录数为0",                    "sInfoFiltered": "(全部记录数 _MAX_ 条)",                    "sInfoPostFix": "",                    "sSearch": "搜索",                    "sUrl": "",                    "oPaginate": {                        "sFirst": "第一页",                        "sPrevious": "上一页",                        "sNext": "下一页",                        "sLast": "最后一页"                    }                },               "ajax": {                   "data": { "wf_entity": "" + wf_entity + "" },                   "url": "/DongWhEngineerCheck/GetExcelInfo",                    "type": "POST"               },               columns: [                      {data:null},                      { data: 'Cj_Name' },                      { data: 'Zz_Name' },                      { data: 'Equip_Desc' },                      { data: 'Equip_Weihao' },                      { data: 'Equip_Code' },                      { data: 'Zy_Name' },                      { data: 'Question_Desc' },                      { data: 'TongZhiDan' },                      { data: 'Submit_Time' },                      { data:null },  //需要设置为option选项的一列                      { data: null},                      { data: null },                      { data: 'Wf_ser' },               ],               "columnDefs": [ {                   "targets": 10,                   "render": function ( data, type, row, meta ) {                       return '<select><option value="已完成">已完成</option><option value="未完成">未完成</option></select>'                   }               } ],               "order": [[1, 'asc']],            });            t.on('order.dt search.dt',                  function () {                      t.column(0, {                          search: 'applied',                          order: 'applied'                      }).nodes().each(function (cell, i) {                          cell.innerHTML = i + 1;                      });                  }).draw();                                  //设置索引列        });

业务需求是需要将datable的第11列设置为option选项列，方法则是先将此列至为null，然后在利用columnDefs对此列进行render渲染，设置成自定义的格式。

关于render渲染，datatable官网：http://datatables.club/reference/option/columns.render

以下为请求目的路径所编写的方法：

 public string GetExcelInfo(string wf_entity)        {            List<QuestionCollect> Exc = Qu.GetQuest(wf_entity);            QuestionCollect exc = new QuestionCollect();            List<object> Ques = new List<object>();                       for(int i=0;i<Exc.Count;i++){                object q = new                {                                    Cj_Name = Exc[i].Cj_Name,                   Zz_Name = Exc[i].Zz_Name,                   Equip_Desc = Exc[i].Equip_Desc,                   Equip_Code = Exc[i].Equip_Code,                   Equip_Weihao = Exc[i].Equip_Weihao,                   Zy_Name = Exc[i].Zy_Name,                   Question_Desc = Exc[i].Question_Desc,                   TongZhiDan = Exc[i].TongZhiDan,                   Submit_Time = Exc[i].Submit_Time,                   Wf_ser = wf.GetWorkFlowEntitySer(Convert.ToInt32(Exc[i].WE_Entity)),                                  };                Ques.Add(q);                }         string str = JsonConvert.SerializeObject(Ques);         return ("{" + "\"data\": " + str + "}");                }

返回的数据为json字符串，有对应变量的只需在columns中设置data:"XX"即可。

经验之谈，不足望见谅。

----------------------------------------------------------------------------------------------------------------------------------------------------------

关于DataTable总结的非常棒的几位博主：

http://www.cnblogs.com/hyywaq/p/5919412.html

http://www.cnblogs.com/amoniyibeizi/p/4548111.html

http://blog.csdn.net/albenxie/article/details/69389641

阅读全文

0 0