Estoy creando una tabla dinámica decir que tiene la columna a,B,C y rellenarlo con los datos, también tengo 1 listbox donde tengo a,B,C como una casilla de verificación basada en la casilla de verificación yo soy la visualización de las columnas, por ejemplo, he seleccionado B,C de la listbox entonces puedo crear la tabla, sólo para B,C y no Una, crear plantilla de jquery para este escenario de datos y enlazar con Knockout.js es lo que yo estoy buscando, pero dudo que las plantillas se pueden utilizar en este escenario como mi tabla es demasiado dinámico..así que mi pregunta es si es posible utilizar nocaut en este escenario. Si no entonces mi enfoque de la utilización de la llanura de jquery será la opción correcta.

si estoy siguiendo jquery enfoque de mi idea de separar la Vista y ViewModel será un problema, como en este caso del Modelo de Vista se han jquery relacionados con operaciones de vista

las muestras en esto será muy útil.

Gracias y Saludos,
Sajesh Nambiar

3 Comentarios

  1. 10

    Usted puede ocultar/mostrar columnas de la tabla usando octavos de final. Una simple, pero efectiva, es la utilización de la visible de enlace en la columna para controlar su visibilidad.

    Aquí un violín que demuestra la idea: http://jsfiddle.net/Ex9J9/42/

    Editar – actualizado el violín a la corrección de error 404 con knock-out de los recursos

    vista:

    <h4>Select Columns:</h4>
    <ul data-bind="foreach: gridOptions.columns">
        <li>
            <label>
                <input type="checkbox" data-bind="checked: isVisible" /> <span data-bind="text: header"></span>
            </label>
        </li>
    </ul>
    <hr>
    <table>
        <thead>
            <tr data-bind="foreach: gridOptions.columns">
                <th data-bind="visible:isVisible, text: header"></th>
            </tr>
        </thead>
        <tbody data-bind="foreach: people">
            <tr data-bind="foreach: $parent.gridOptions.columns">
                <td data-bind="text: $parent[dataMember], visible:isVisible"></td>
            </tr>
        </tbody>
    </table>

    vista de modelo:

    var vm = {
        gridOptions: {
            columns: [{
                header: 'First Name',
                dataMember: 'firstName',
                isVisible: ko.observable(true)
            }, {
                header: 'Last Name',
                dataMember: 'lastName',
                isVisible: ko.observable(true)
            }]
        },
    
        people: [{
            firstName: 'Bert',
            lastName: 'Bertington'
        }, {
            firstName: 'Charles',
            lastName: 'Charlesforth'
        }, {
            firstName: 'Denise',
            lastName: 'Dentiste'
        }]
    };
    
    ko.applyBindings(vm);
  2. 0

    Si las opciones son pequeños, como 3 o así que usted puede crear tres plantillas y, a continuación, en la página de hacer algo como esto:

    <!-- ko 'if': AIsSelectedAndNotBOrC == true -->
    //display the tmeplate
    <!-- /ko -->

    //Esto para el resto de las variaciones…

    Esto funciona, pero si usted tiene muchas variaciones, entonces podría ser demasiado engorroso.

Dejar respuesta

Please enter your comment!
Please enter your name here