Question

我正在使用knockout.js和bootstraptable工作，我不知道为什么表没有渲染。需要帮助！

以下是我的示例代码：

knockout viewmodel

var SelectViewModel = function (id, text) {
this.Id = ko.observable(id);
this.Text = ko.observable(text);
};

var PageViewModel=function(){
var self=this;
self.SmartTypeList=ko.observableArray([]);
self.SmartTypeQueryList=ko.observableArray([new SelectViewModel(-1,"ALL")]);
self.Operation;
self.InitData=function()
{
$.post(getRootPath_web()+'/Backend/ZigbeeEquipmentType/ListAll',
function(data){
        for(c in data){
            self.SmartTypeList.push({Id:data[c].id,Text:data[c].name});
            self.SmartTypeQueryList.push({Id:data[c].id,Text:data[c].name});
        }   
        bootsModel.initTable();
    },'json');
}
}

bootstraptable model

var bootstrapTableModel=function(){
var self=this;
self.queryParams = function (params) {
    var temp = {   
        limit: params.limit,   
        offset: params.offset,  
        query_typeId: $("#EqTypeQuerySelect").val(),
        query_sn: $("#QuerySN").val()
    };
    return temp;
};
self.initTable=function()
{
    $('#SmartEQTable').bootstrapTable({
        method: 'post',
        url:getRootPath_web()+'/Backend/ZigbeeEquipment/List',
        contentType:"application/x-www-form-urlencoded",
        toolbar: '#toolbar',                
        ....somthing....               
        onLoadError: function (status) {
            alert("error");
        },
        onLoadSuccess: function (data) {
            alert("ok");
        }
    });
}}

var viewModel=new PageViewModel();
var bootsModel=new bootstrapTableModel();

获取绑定和初始化数据（功能（）{ viewModel.InitData（）; ko.applyBindings（视图模型）; }）（）;

Answer 1

<extend name="./TPL/default/MainPage/layout.tpl" />
<block name="maincontent">
<div class="modal fade" id="MainModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Add</h4>
            </div>
            <div class="modal-body">
                <form id="MainForm" method="post">
                    <div class="form-horizontal">
                        <div class="form-group">
                            <label class="control-label col-md-3" for="Equipment_Type">Type</label>
                            <div class="col-md-9">
                                <select class="form-control type-select" data-bind="options:SmartTypeList,optionsText:'Text',optionsValue:'Id'" name="EqTypeSelect"></select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-md-3" for="Corporation">STB</label>
                            <div class="col-md-9">
                                <input type="hidden" class="form-control" id="Form_ID" data-bind="value:Id">
                                <input class="form-control" id="Form_SN" name="Form_SN" data-bind="value:Name"></input>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" data-bind="click:A_Save_Click" id="btnSave">Save</button>
            </div>

        </div>
    </div>
</div>
    <div class="row">
        <div class="col-lg-12 col-sm-12 col-xs-12">
            <div class="row">
                <div class="col-lg-12 col-sm-12 col-xs-12">
                    <div class="row">
                        <div class="col-lg-12 col-sm-12 col-xs-12">
                             <div class="widget">
                                        <div class="widget-body">
                                            <form class="form-horizontal" role="form">
                                                <div class="form-group">
                                                        <label for="SN" class="col-lg-1 control-label no-padding-right">SN:</label>
                                                        <div class="col-lg-2">
                                                            <input type="text" class="form-control" id="QuerySN" placeholder="SN">
                                                        </div> 

                                                        <label for="Param_DType" class="col-lg-2 control-label no-padding-right">Type:</label>
                                                        <div class="col-lg-2">
                                                            <select id="EqTypeQuerySelect" name="EqTypeQuerySelect" class="form-control type-select" data-bind="options:SmartTypeQueryList,optionsText:'Text',optionsValue:'Id'" ></select>
                                                        </div>                                                  
                                                </div>

                                                <div class="form-group">
                                                    <div class="col-sm-offset-0 col-sm-1">
                                                        <a id="A_Query"  class="btn btn-success shiny" data-bind="click:A_Query_Click">Query</a>
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    <div class="input-group" margin="10">
                                                        <a id="A_Add" class="btn btn-default purple" data-bind="click:A_Add_Click"><i class="fa fa-plus"></i> Add</a>
                                                        <a id="A_Edit" class="btn btn-primary" ><i class="fa fa-shopping-cart"></i> Modify</a>
                                                        <a id="A_Del" class="btn btn-danger" ><i class="fa fa-times"></i> Del</a>
                                                    </div>

                                                </div>
                                                </form>
                                        </div><!--Widget Body-->
                                        <div class="widget-body">
                                        <table data-toggle="table" class="table table-striped table-bordered table-hover" id="SmartEQTable" >
                                            <thead>
                                            <tr>
                                                <th data-field="id">ID</th>
                                                <th data-field="sn">SN</th>
                                                <th data-field="smarttype">Type</th>
                                            </tr>
                                            </thead>
                                        </table>

                                        </div><!--Widget Body-->
                                        <div class="widget-body">
                                            <p>
                                                Without any change in default mark-up.
                                            </p>
                                        </div><!--Widget Body-->
                                    </div><!--Widget-->
                        </div>
                    </div>

                    <div class="row">
                    </div>

                    <div class="row">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="__PUBLIC__/PageJS/Page.js"></script>

    <script type="text/javascript" src="__PUBLIC__/PageJS/Equipment/ZigbeeTestManagement.js"></script>
    <script  type="text/javascript">

    </script >

</block>

bootstraptable不适用于knockoutjs

1 个答案: