【福分系统】bootstrap表格控件

  无论是CS中我们常用的datagridview控件，还是BS中使用的table控件，它们具有同样的功能，就是以表格的形式显示需求的内容,不同的是用户体验。就我而言，更加喜欢BS中的表格，尤其是使用前端框架之后的显示效果。
  下面是我用bootstrap做的一个最初始的表格效果：

代码部分

html

<div class="mui-content" style="margin-top: 10%; width: 100%; background-color: #FFFFFF;">
    <table class="table table-striped" id="show">
        <tr id="showTitle">
            <td style="width: auto; padding: 2%">姓名</td>
            <td style="width: auto; padding: 2%">福分</td>
            <td style="width: auto; padding: 2%">类型</td>
            <td style="width: auto; padding: 2%">时间</td>
        </tr>
    </table>
</div>

css

.table 
{
    padding: 0;
    border: 1px solid #CCCCCC;
    color: #666;
    width: 100%;
    overflow-y: auto;
    _overflow: auto;
    word-break: break-all;
    word-wrap: break-word;
}

javascript

$(function () {
    var oTableInit = new Object();  // 表格

    $.ajax({
        //请求后台的URL
        url: '/mobile_personScore/QueryLoadMcoinRecord',
        // 数据发送方式
        type: "POST",
        // 接受数据格式
        dataType: "json",
        success: function (data) {
            $('#show').html("");
            var optionst = "<tr><td style='width: auto;padding:2%;'>姓名</td>";
            optionst += "<td style='width: auto;padding:2%;'>福分</td>";
            optionst += "<td style='width: auto;padding:2%;'>类型</td>";
            optionst += "<td style='width: auto;padding:2%;'>日期</td></tr>";
            $('#show').append(optionst);
            if (data.length == 0) {
                mui.alert("未找到相关记录");
                //表格标头
                var optionstring = "<tr><td style='width: auto;padding:2%;'>姓名</td>";
                optionstring += "<td style='width: auto;padding:2%;'>福分</td>";
                optionstring += "<td style='width: auto;padding:2%;'>类型</td>";
                optionstring += "<td style='width: auto;padding:2%;'>日期</td> </tr>";
            }
            else {
                //详细填充具体内容
                for (var i = 0 ; i < data.length; i++) {
                    optionstring += "<tr><td style='width: auto;padding:2%;'>" + data[i].userName + "</td>";
                    optionstring += "<td style='width: auto;padding:2%;'>" + data[i].addMcoin; + "</td>";
                    optionstring += "<td style='width: auto;padding:2%;'>" + data[i].type + "</td>";
                    optionstring += "<td style='width: auto;padding:2%;'>" + data[i].date + "</td> </tr>";
                }
                $('#show').append(optionstring);
            }
        }    
    })
})       

controller

public ActionResult QueryLoadMcoinRecord()
{         
    McoinBonusBLL mcoinbonusBLL = new McoinBonusBLL();
    List<ViewModel.addMcoinRecordViewModel> McoinList = new List<ViewModel.addMcoinRecordViewModel>();
    McoinList = mcoinbonusBLL.QueryLoadMcoinRecord();
    return Json(McoinList, JsonRequestBehavior.AllowGet);
}

小结

  做项目的初期，我们的代码可能仅仅是为了完成功能，随着对自己的要求的不断提高，我们也需要不断改变自己。

- 对需求/功能实现而言，我们需要知道，如何才能做得更好，不仅仅是客户要什么我们做什么，更进一步是做出客户想不到但用着更舒服的功能。
- 对知识而言，我们就需要将我们的代码进行优化，对相关知识点进行异同比较。
- 对个人成长而言，我们需要有更多的耐心对待我们做的每一个功能，设计的每一个界面。