javascriptjquerycssjquery-easyui

How to freeze first column of the table?

I have a table which is implemented by making use of jquery EasyUI. I want first column of the table to be freezed and remaing column should have scrollbar when the page is in smaller screen. Code Here snippet

How can I freeze only Title1 column.

I tried adding that Title1 column in Datagrid-view1 to achieve this. But I couldn't able to find proper solution ..Thanks in advance

Solution

  • The documentation you're looking for is here: https://www.jeasyui.com/documentation/index.php

    According to the documentation, you're looking for the frozenColumns option. You take the columns you want frozen out of the columns section and add them in frozenColumns.

    Something like this:

    frozenColumns: [[
    {field:'f1',title:'title1',width:100,editor:'text'},
]],
columns:[[
    {field:'f2',title:'title2',width:100,editor:'text'},
    {field:'f3',title:'title3',width:100,editor:'text'},
    {field:'f4',title:'NotSave',width:50,
    editor:{type:'checkbox',options:{on:1,off:0}}}
]],

    You also need to turn off fitColumns.

    fitColumns: false,

    With these settings I get a horizontal scrollbar in the code you put up.