JqWidgets - 将主题应用于jqxgrid

时间:2017-06-16 14:36:53

标签: html css angularjs jqxgrid jqwidget

在Angular中,我正在尝试将一个主题应用到我的网格中。

我的网格

          <div class="panel-body">
            <jqxGrid #reference 
              [width]='1505' [source]='dataAdapter' [pageable]='true' [height]='500'
              [editable]='true' [columns]='columns'>
           </jqxGrid>

          </div>    

在jqwidgets文件夹中,我想在jqx.energyblue.css中使用该主题的主题

我不确定如何在我创建的网格中调用它。我是新来的。非常感谢任何帮助。

UPDATE ***

我可能已经取得了一些进展。在index.html中,我能够设置主题属性。

  <link href="assets/css/jqx.base.css" rel="stylesheet">
  <link href="assets/css/jqx.energyblue.css" rel="stylesheet">
  <script type="text/javascript">
        $(document).ready(function () {
            // Set the theme.
            $("#jqxTheme").jqxGrid({ theme: "energyblue" });
        });
    </script>

然后对网格本身进行了更改。

              <div class="panel-body">
                <jqxGrid id='jqxTheme'
                  [width]='1505' [source]='dataAdapter' [pageable]='true' [height]='500'
                  [editable]='true' [columns]='columns'>
               </jqxGrid>

              </div>

仍然不起作用。有什么想法吗?

1 个答案:

答案 0 :(得分:1)

知道了。将css主题的名称应用于jqxGrid

   <jqxGrid
      [width]='1505' [source]='dataAdapter' [pageable]='true' [height]='500'
      [editable]='true' [columns]='columns' [theme]='"energyblue"'>
   </jqxGrid>